Cómo modificar el atributo 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/

Si quito TR continuación, la tabla es debido a roturas ROWSPAN es demasiado grande. ¿Es posible modificar ROWSPAN? Si es así, ¿cómo?

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

yo esperaría que el método attr() para trabajar ... Prueba esto:

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

Por ejemplo:

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

Answer 3

Sólo en caso de que lo necesite, He escrito una función que detecta automáticamente nombres repetidos en una columna y agrega rowspan. Solo necesita proporcionar una columna (matriz de valores 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/