Search This Blog

Thursday, February 26, 2015

How to remove the inline style using Jquery

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')">&lt;</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')">&gt;</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

Validating to select in sequencial order using angular

    < input type = "checkbox" (change) = "handleSelectTaskItem($event, taskItem)" [checked] = " taskItem . i...