如何使用 jQuery 修改属性 ROWSPAN?

Posted

技术标签:

【中文标题】如何使用 jQuery 修改属性 ROWSPAN?【英文标题】:How to modify attribute ROWSPAN with jQuery? 【发布时间】:2012-03-29 10:37:50 【问题描述】:
<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();
)

小提琴:http://jsfiddle.net/r5BDW/1/

如果我删除 TR,则表会中断,因为 ROWSPAN 太大。是否可以修改 ROWSPAN?如果是,怎么做?

【问题讨论】:

【参考方案1】:

以防万一您需要它,我编写了一个函数,它可以自动检测列中的重复名称并添加行跨度。您只需要提供一列(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/

【讨论】:

只是我,还是你之前和之后的例子有完全相同的元素? :) 我认为这个例程非常适合我的需要,但是在进一步测试这个代码似乎有最后一行的问题。见jsfiddle.net/eupb0fmx/3 我在这里发布的关于这个主题的问题有更好的解决方案。***.com/questions/67324092/…【参考方案2】:
 $('.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()

【讨论】:

【参考方案3】:

我希望 attr() 方法可以工作...试试这个:

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

例如:

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

【讨论】:

以上是关于如何使用 jQuery 修改属性 ROWSPAN?的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 Vue.js 渲染含有 rowspan 属性的 table

在 jquery 中使用 html 的 rowspan_problem

怎么动态的rowspan合并行

jQuery:通过搜索输入隐藏表格行,解决 td rowspan 和 colspan

用js怎么获取HTML里面colSpan和rowSpan属性里面的值。也就是跨了几行或者几列。

如何使用 datatable.js 在 tbody 中使用 rowspan 和 colspan?