如何在向表中添加行时更改Div Id值

时间:2011-09-11 07:36:05

标签: javascript jquery html-table

我有一个问题,这个问题的解决方案只是有点超出我的编程能力...希望有人可以帮助我。

我在每个单元格内都有一个div表。每当向表中添加行或列时,我都需要动态更改div id。 div id围绕表格的蛇,所以当添加新的行或列时,div id必须改变。 div ID在Javascript中使用,因此它们必须动态更改或代码不起作用。

我创建了所有内容的图片示例,但由于我是新成员,我无法添加它们。希望下面的文字示例能帮助您了解我的意思......

2X2带有div id的表,可以绕回:

| div id = 1 | div id = 2 |
| div id = 4 | div id = 3 |

2X3表,其中添加了一个新列,其中div ID需要如何显示:

| div id = 1 | div id = 2 | div id = 3 |
| div id = 6 | div id = 5 | div id = 4 |

另外,如果你有另外一个想法可以解决这个问题,请告诉我。我对所有建议持开放态度。

更新......

我添加了一个jsfiddle,其中包含我的代码的一个小例子以及它是如何被使用的。在这一点上,我认为我有两个选择。

正如您所看到的,可拖动的按顺序会丢失或者它们会恢复,所以一种选择就是改变完成方式。

我的第二个选项是这里已经提到的几次,并改变了div与jQuery可删除代码的关系。

希望这有帮助。

http://jsfiddle.net/irocmon/wzb5U/

2 个答案:

答案 0 :(得分:0)

不知道我是否正确理解了你的问题,但这是我提出的一个例子:

http://jsfiddle.net/zUdZR/2/

HTML:

<table border="1">
    <tr><td><div></div></td><td><div></div></td></tr>
    <tr><td><div></div></td><td><div></div></td></tr>
</table>
<button id="r">add row</button><button id="c">add column</button>

jQuery的:

$(function(){
    updateIDs();
    $('#r').click(function(){
        $('table').append($('table tr:last-child').clone());
        updateIDs();
    });

    $('#c').click(function(){
        $('table td:last-child').after('<td><div></div></td>');
        updateIDs();
    });


    function updateIDs(){
        $('div').each(function(i){
            var $d = $(this);
            var even = ($d.closest('tr').index()+1)%2==0;
            var tdl = $d.closest('tr').find('td').length;
            var tdi = $d.closest('td').index()+1;
            var id = i+1;
            id = even ?(id-tdi+1)-tdi+tdl:id;
            $(this).text(id);
        });   
    }
});

答案 1 :(得分:0)

我刚刚在http://jsfiddle.net/65Uwh/为你写了一个快速演示。它遍历所有行,检查它是奇数还是偶数,并根据需要重命名ID(并设置每个div中的跨度值,以便您可以看到数字)。

您应该能够轻松添加一个按钮,该按钮在单击时向表格添加一行,该表格与最后一行(使用$("tbody tr:last-child", $(this)).clone();)完全相同,并将其追加到{ {1}},然后调用该函数。列应该一样容易。