如何用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/