Come modificare l'attributo ROWSPAN con 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/

Se rimuovo TR allora tavolo è pause perché ROWSPAN è troppo grande. È possibile modificare ROWSPAN? Se sì, come?

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

mi aspetterei il metodo attr() per lavorare ... provare questo:

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

Ad esempio:

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

Answer 3

Solo in caso di necessità, Ho scritto una funzione che rileva automaticamente i nomi ripetuti in una colonna e aggiunge rowspan. Hai solo bisogno di fornire una colonna (array di valori 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/