JQuery的切換與rowspan屬性

Question

試圖切換每個第二行意味着class name = readdetail，但似乎它的下一行由於第一行有屬性rowspan。

我該怎麼辦？任何替代方案？ 如何在用戶單擊切換按鈕時顯示每個第二行，而不影響第一行的rowspan屬性。

我的HTML表結構是：

jQuery(document).ready(function() { 
 
    jQuery('#btnAdd').on('click', function(e) { 
 
     jQuery('.readdetail').toggle(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="btnAdd" name="btnAdd" class="span1">Toggle</button> 
 
<br/> 
 
<br/> 
 
<table border="1"> 
 
    <tr> 
 
     <th>Sr No</th> 
 
     <th>Student Name</th> 
 
     <th>Classname</th> 
 
     <th>Action</th> 
 
    </tr> 
 
    <tr class="boxdetail"> 
 
     <td rowspan="2">1</td> 
 
     <td>Test1</td> 
 
     <td>Class1</td> 
 
     <td rowspan="2">Cancel</td> 
 
    </tr> 
 
    <tr class="readdetail"> 
 
     <td>87</td> 
 
     <td>90</td> 
 
    </tr> 
 
    <tr class="boxdetail"> 
 
     <td rowspan="2">1</td> 
 
     <td>Test2</td> 
 
     <td>Class2</td> 
 
     <td rowspan="2">Cancel</td> 
 
    </tr> 
 
    <tr class="readdetail"> 
 
     <td>44</td> 
 
     <td>54</td> 
 
    </tr> 
 
    <tr class="boxdetail"> 
 
     <td rowspan="2">1</td> 
 
     <td>Test3</td> 
 
     <td>Class3</td> 
 
     <td rowspan="2">Cancel</td> 
 
    </tr> 
 
    <tr class="readdetail"> 
 
     <td>84</td> 
 
     <td>72</td> 
 
    </tr> 
 
</table>

Answer 1

試試這個代碼。我正在使用rowspan=2向td添加一個類。現在處理基礎上的其他tr

jQuery(document).ready(function() { 
 
    $("td[rowspan='2']").addClass("toggleRowSpan"); 
 
    jQuery('#btnAdd').on('click', function(e) { 
 
     jQuery('.readdetail').toggle(); 
 
     if($(".readdetail:visible").length==0){ 
 
      $(".toggleRowSpan").attr("rowSpan", "1"); 
 
     } 
 
     else{ 
 
      $(".toggleRowSpan").attr("rowSpan", "2"); 
 
     } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="btnAdd" name="btnAdd" class="span1">Toggle</button> 
 
<br/> 
 
<br/> 
 
<table border="1"> 
 
    <tr> 
 
     <th>Sr No</th> 
 
     <th>Student Name</th> 
 
     <th>Classname</th> 
 
     <th>Action</th> 
 
    </tr> 
 
    <tr class="boxdetail"> 
 
     <td rowspan="2">1</td> 
 
     <td>Test1</td> 
 
     <td>Class1</td> 
 
     <td rowspan="2">Cancel</td> 
 
    </tr> 
 
    <tr class="readdetail"> 
 
     <td>87</td> 
 
     <td>90</td> 
 
    </tr> 
 
    <tr class="boxdetail"> 
 
     <td rowspan="2">1</td> 
 
     <td>Test2</td> 
 
     <td>Class2</td> 
 
     <td rowspan="2">Cancel</td> 
 
    </tr> 
 
    <tr class="readdetail"> 
 
     <td>44</td> 
 
     <td>54</td> 
 
    </tr> 
 
    <tr class="boxdetail"> 
 
     <td rowspan="2">1</td> 
 
     <td>Test3</td> 
 
     <td>Class3</td> 
 
     <td rowspan="2">Cancel</td> 
 
    </tr> 
 
    <tr class="readdetail"> 
 
     <td>84</td> 
 
     <td>72</td> 
 
    </tr> 
 
</table>