Как изменить атрибут ROWSPAN с помощью 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/

Если я удаляю 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

На всякий случай, если вам это нужно, я написал функцию, которая автоматически обнаруживает повторяющиеся имена в столбце и добавляет размах строк.Вам просто нужно указать столбец (массив значений 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/