Làm thế nào để sửa đổi thuộc tính ROWSPAN với jQuery?

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/

Nếu tôi loại bỏ TR sau đó bảng là phá vỡ vì rowspan là quá lớn. Có thể sửa đổi ROWSPAN không? Nếu có, làm thế nào?

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

tôi mong chờ các phương pháp attr() để làm việc ... thử này:

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

Ví dụ:

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

Answer 3

Chỉ trong trường hợp bạn cần đến nó, Tôi đã viết một hàm tự động phát hiện các tên lặp lại trong một cột và thêm rowspan. Bạn chỉ cần cung cấp một cột (mảng giá trị 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/