Jquery使用rowspan属性切换

Question

尝试为每个第二行切换意味着class name = readdetail，但由于第一行具有属性rowspan，所以它似乎在下一行中断。

我该怎么办？任何替代方案？ 如何在用户单击“切换”按钮时显示每个第2行，而不会影响第一行的rowspan属性。

我的html表格结构是：

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

试试这段代码。我正在使用td向rowspan=2添加一个课程。现在根据其他rowspan

的可见性处理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>