Welcome to designer Blog here i have posted how to remove the inline style using Jquery
Step 1:
<script type="text/javascript">
$(document).ready(function () {
$("#MyCalendar").find("table, tr, td").eq(1).removeAttr("style");
});
</script>
Html Structure
<div id="calendar">
<h2>Events</h2>
<table cellspacing="0" cellpadding="1" border="0" style="border-width:0px;border-collapse:collapse;" title="Calendar" class="table table-bordered" id="MyCalendar">
<tbody>
<tr>
<td colspan="7"><table cellspacing="0" border="0" style="width:100%;border-collapse:collapse;" class="month">
<tbody>
<tr>
<td valign="middle" style="width:15%;" class=""><a title="Go to the previous month" style="color:Black" href="javascript:__doPostBack('MyCalendar','V5479')"><</a></td>
<td align="center" style="width:70%;">February 2015</td>
<td valign="middle" align="right" style="width:15%;" class="navigation"><a title="Go to the next month" style="color:Black" href="javascript:__doPostBack('MyCalendar','V5538')">></a></td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<th align="center" scope="col" abbr="Sunday">Su</th>
<th align="center" scope="col" abbr="Monday">Mo</th>
<th align="center" scope="col" abbr="Tuesday">Tu</th>
<th align="center" scope="col" abbr="Wednesday">We</th>
<th align="center" scope="col" abbr="Thursday">Th</th>
<th align="center" scope="col" abbr="Friday">Fr</th>
<th align="center" scope="col" abbr="Saturday">Sa</th>
</tr>
<tr>
<td align="center" style="width:14%;">25</td>
<td align="center" style="width:14%;">26</td>
<td align="center" style="width:14%;">27</td>
<td align="center" style="width:14%;">28</td>
<td align="center" style="width:14%;">29</td>
<td align="center" style="width:14%;">30</td>
<td align="center" style="width:14%;">31</td>
</tr>
<tr>
<td align="center" style="width:14%;">1</td>
<td align="center" style="width:14%;">2</td>
<td align="center" style="width:14%;">3</td>
<td align="center" style="width:14%;">4</td>
<td align="center" style="width:14%;">5</td>
<td align="center" style="width:14%;">6</td>
<td align="center" style="width:14%;">7</td>
</tr>
<tr>
<td align="center" style="width:14%;">8</td>
<td align="center" style="width:14%;">9</td>
<td align="center" style="width:14%;">10</td>
<td align="center" style="width:14%;">11</td>
<td align="center" style="width:14%;">12</td>
<td align="center" style="width:14%;">13</td>
<td align="center" style="width:14%;">14</td>
</tr>
<tr>
<td align="center" style="width:14%;">15</td>
<td align="center" style="width:14%;">16</td>
<td align="center" style="width:14%;">17</td>
<td align="center" style="width:14%;">18</td>
<td align="center" style="width:14%;">19</td>
<td align="center" style="width:14%;">20</td>
<td align="center" style="width:14%;">21</td>
</tr>
<tr>
<td align="center" style="width:14%;">22</td>
<td align="center" style="width:14%;"><a href="EventsDescription.aspx?JkV2ZW50c19JRD0zJlByaU1lbnVJRD0wJm1udT1Qcmk=" title="Events" class="calendar-tips">23<br>
Events Title 08</a></td>
<td align="center" style="width:14%;">24</td>
<td align="center" style="width:14%;">25</td>
<td align="center" style="width:14%;">26</td>
<td align="center" style="width:14%;">27</td>
<td align="center" style="width:14%;">28</td>
</tr>
<tr>
<td align="center" style="width:14%;">1</td>
<td align="center" style="width:14%;">2</td>
<td align="center" style="width:14%;">3</td>
<td align="center" style="width:14%;">4</td>
<td align="center" style="width:14%;"><a href="EventsDescription.aspx?JkV2ZW50c19JRD00JlByaU1lbnVJRD0wJm1udT1Qcmk=" title="Events" class="calendar-tips">5<br>
Events Title En</a> <a href="EventsDescription.aspx?JkV2ZW50c19JRD01JlByaU1lbnVJRD0wJm1udT1Qcmk=" title="Events" class="calendar-tips"><br>
Test Title</a></td>
<td align="center" style="width:14%;">6</td>
<td align="center" style="width:14%;">7</td>
</tr>
</tbody>
</table>
</div>
Step3:
Here is the javascript code which remove the inline style
My Calendar is ID of the table and findind the tabe tr td, eq is used for removing the 1st position of
the style attribute
$("#MyCalendar").find("table, tr, td").eq(1).removeAttr("style");
Step4:
Enjoy Folks
Step 1:
<script type="text/javascript">
$(document).ready(function () {
$("#MyCalendar").find("table, tr, td").eq(1).removeAttr("style");
});
</script>
Html Structure
<div id="calendar">
<h2>Events</h2>
<table cellspacing="0" cellpadding="1" border="0" style="border-width:0px;border-collapse:collapse;" title="Calendar" class="table table-bordered" id="MyCalendar">
<tbody>
<tr>
<td colspan="7"><table cellspacing="0" border="0" style="width:100%;border-collapse:collapse;" class="month">
<tbody>
<tr>
<td valign="middle" style="width:15%;" class=""><a title="Go to the previous month" style="color:Black" href="javascript:__doPostBack('MyCalendar','V5479')"><</a></td>
<td align="center" style="width:70%;">February 2015</td>
<td valign="middle" align="right" style="width:15%;" class="navigation"><a title="Go to the next month" style="color:Black" href="javascript:__doPostBack('MyCalendar','V5538')">></a></td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<th align="center" scope="col" abbr="Sunday">Su</th>
<th align="center" scope="col" abbr="Monday">Mo</th>
<th align="center" scope="col" abbr="Tuesday">Tu</th>
<th align="center" scope="col" abbr="Wednesday">We</th>
<th align="center" scope="col" abbr="Thursday">Th</th>
<th align="center" scope="col" abbr="Friday">Fr</th>
<th align="center" scope="col" abbr="Saturday">Sa</th>
</tr>
<tr>
<td align="center" style="width:14%;">25</td>
<td align="center" style="width:14%;">26</td>
<td align="center" style="width:14%;">27</td>
<td align="center" style="width:14%;">28</td>
<td align="center" style="width:14%;">29</td>
<td align="center" style="width:14%;">30</td>
<td align="center" style="width:14%;">31</td>
</tr>
<tr>
<td align="center" style="width:14%;">1</td>
<td align="center" style="width:14%;">2</td>
<td align="center" style="width:14%;">3</td>
<td align="center" style="width:14%;">4</td>
<td align="center" style="width:14%;">5</td>
<td align="center" style="width:14%;">6</td>
<td align="center" style="width:14%;">7</td>
</tr>
<tr>
<td align="center" style="width:14%;">8</td>
<td align="center" style="width:14%;">9</td>
<td align="center" style="width:14%;">10</td>
<td align="center" style="width:14%;">11</td>
<td align="center" style="width:14%;">12</td>
<td align="center" style="width:14%;">13</td>
<td align="center" style="width:14%;">14</td>
</tr>
<tr>
<td align="center" style="width:14%;">15</td>
<td align="center" style="width:14%;">16</td>
<td align="center" style="width:14%;">17</td>
<td align="center" style="width:14%;">18</td>
<td align="center" style="width:14%;">19</td>
<td align="center" style="width:14%;">20</td>
<td align="center" style="width:14%;">21</td>
</tr>
<tr>
<td align="center" style="width:14%;">22</td>
<td align="center" style="width:14%;"><a href="EventsDescription.aspx?JkV2ZW50c19JRD0zJlByaU1lbnVJRD0wJm1udT1Qcmk=" title="Events" class="calendar-tips">23<br>
Events Title 08</a></td>
<td align="center" style="width:14%;">24</td>
<td align="center" style="width:14%;">25</td>
<td align="center" style="width:14%;">26</td>
<td align="center" style="width:14%;">27</td>
<td align="center" style="width:14%;">28</td>
</tr>
<tr>
<td align="center" style="width:14%;">1</td>
<td align="center" style="width:14%;">2</td>
<td align="center" style="width:14%;">3</td>
<td align="center" style="width:14%;">4</td>
<td align="center" style="width:14%;"><a href="EventsDescription.aspx?JkV2ZW50c19JRD00JlByaU1lbnVJRD0wJm1udT1Qcmk=" title="Events" class="calendar-tips">5<br>
Events Title En</a> <a href="EventsDescription.aspx?JkV2ZW50c19JRD01JlByaU1lbnVJRD0wJm1udT1Qcmk=" title="Events" class="calendar-tips"><br>
Test Title</a></td>
<td align="center" style="width:14%;">6</td>
<td align="center" style="width:14%;">7</td>
</tr>
</tbody>
</table>
</div>
Step3:
Here is the javascript code which remove the inline style
My Calendar is ID of the table and findind the tabe tr td, eq is used for removing the 1st position of
the style attribute
$("#MyCalendar").find("table, tr, td").eq(1).removeAttr("style");
Step4:
Enjoy Folks
No comments:
Post a Comment