如何用jQuery修改屬性ROWSPAN？

Question

<table border="1">
    <tr><td>111</td><td>22</td><td rowspan="3">ads</td></tr>
    <tr><td>111</td><td class="remove">22</td></tr>
    <tr><td>111</td><td class="remove">22</td></tr>
    <tr><td>111</td><td>22</td><td rowspan="3">ads</td></tr>
    <tr><td>111</td><td class="remove">22</td></tr>
    <tr><td>111</td><td class="remove">22</td></tr>
    <tr><td>111</td><td>22</td><td rowspan="3">ads</td></tr>
    <tr><td>111</td><td class="remove">22</td></tr>
    <tr><td>111</td><td class="remove">22</td></tr>
</table>

$('.remove').click(function(){
   $(this).parent().remove();
})

FIDDLE： http ： //jsfiddle.net/r5BDW/1/

如果我刪除TR，那么表就會中斷，因為ROWSPAN太大了。 可以修改ROWSPAN嗎？ 如果有，怎么樣？

Answer 1

 $('.remove').click(function(){
     $(this).parent()
            .prevAll('tr:has(td[rowspan]):first')
            .find('td[rowspan]')
            .attr('rowspan', function(i, rs) { return rs - 1; })
            .end()
            .end()
            .remove();
 });

• .parent()
• .prevAll()
• element-selector
• has-selector
• has-attribute-selector
• first-selector
• .find()
• .attr()
• .end()
• .remove()

Answer 2

我希望attr（）方法有效...試試這個：

$('selector for the element you want to modify').attr('rowspan', 'newvalue');

例如：

$('#myCell').attr('rowspan', '2');

Answer 3

為了防止你需要它，我編寫了一個自動檢測列中重復名稱並添加rowspan的函數。 您只需要提供一列（td值數組）。

 var column1 = $('.modified_table td:first-child'); var column2 = $('.modified_table td:nth-child(2)'); var column3 = $('.modified_table td:nth-child(3)'); modifyTableRowspan(column1); modifyTableRowspan(column2); modifyTableRowspan(column3); function modifyTableRowspan(column) { var prevText = ""; var counter = 0; column.each(function (index) { var textValue = $(this).text(); if (index === 0) { prevText = textValue; } if (textValue !== prevText || index === column.length - 1) { var first = index - counter; if (index === column.length - 1) { counter = counter + 1; } column.eq(first).attr('rowspan', counter); if (index === column.length - 1) { for (var j = index; j > first; j--) { column.eq(j).remove(); } } else { for (var i = index - 1; i > first; i--) { column.eq(i).remove(); } } prevText = textValue; counter = 0; } counter++; }); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script> Before: <table class="unmodified_table" border="1"> <tr><td>111</td><td>22</td><td>ads</td></tr> <tr><td>111</td><td >22</td><td>ads</td></tr> <tr><td>111</td><td >22</td><td>abs</td></tr> <tr><td>111</td><td>22</td><td>ads</td></tr> <tr><td>111</td><td >22</td><td>abs</td></tr> <tr><td>111</td><td >22</td><td>ads</td></tr> <tr><td>111</td><td>22</td><td>ads</td></tr> <tr><td>111</td><td >22</td><td>ads</td></tr> <tr><td>111</td><td >22</td><td>abs</td></tr> </table> <br /> </br> After: <table class="modified_table" border="1"> <tr><td>111</td><td>22</td><td>ads</td></tr> <tr><td>111</td><td >22</td><td>ads</td></tr> <tr><td>111</td><td >22</td><td>abs</td></tr> <tr><td>111</td><td>22</td><td>ads</td></tr> <tr><td>111</td><td >22</td><td>abs</td></tr> <tr><td>111</td><td >22</td><td>ads</td></tr> <tr><td>111</td><td>22</td><td>ads</td></tr> <tr><td>111</td><td >22</td><td>ads</td></tr> <tr><td>111</td><td >22</td><td>abs</td></tr> </table> 

JSFiddle： https ：//jsfiddle.net/1ewk227x/2/