jQuery循环遍历表以显示值

Question

我在这里不知所措。 我创建了一个快速脚本，它将向表中添加新行，并且还具有删除行的能力。

jsFiddle -->http://jsfiddle.net/wLpJr/10/

我想要实现的是： 显示每一行的每个值（在 id='thedata' 的 div 中）

我最初是在每个 id 的末尾添加一个数字，从“1”开始，每次用户添加一行时递增。

 //This is random code
 var rowcount = parseInt($('#rowcount').val());
 var newcount = rowcount + (1*1);
 var x = $('#radioinput' + newcount).val('a value');
 $('#rowcount').val(newcount);

问题是假设您添加了 5 行。现在删除第 3 行。当您遍历数据表时，您将收到错误消息，因为第“3”行不存在。您有第 1、2、4、5、6 行。特别是 - id = 'radioinput3' 的输入将不存在。

然后我决定这样做：

 $('#maintable > tbody > tr').each(function() {
        radiovalue[i] = $("input[type='hidden']", this).map(function() {
            var vid = 'radio' + i;
            var myval = this.value;
            var radioinput = document.createElement("input");
                radioinput.type = "hidden";
                radioinput.value = myval; // set the CSS class
                radioinput.id = vid;
                $('#maintable').append(radioinput);
        }).get()
        text1value[i] = $('td > input', this).map(function() {
            var vid = 'text1pos' + i;
            var myval = this.value;
            var text1input = document.createElement('input');
            text1input.type='hidden';
            text1input.value = myval;
            text1input.id = vid;
            $('#maintable').append(text1input);
        }).get()
        text2value[i] = $('td > input', this).map(function() {
            var vid = 'text2pos' + i;
            var myval = this.value;
            var text2input = document.createElement('input');
            text2input.type='hidden';
            text2input.value = myval;
            text2input.id = vid;
            $('#maintable').append(text2input);
        }).get();
    });

这里的问题是我得到了“未定义”的值。

Answer 1

您正在循环遍历一个计数器，每次添加新行时都会递增该计数器，但不要考虑可以随时删除行。相反，只需使用 each 函数循环遍历 DOM 中剩余的元素。

在您的表格中添加thead 和tbody 标签，它会让您的生活更轻松。

我不知道为什么你有那些隐藏的 div 来保存 input[type=radio] 值，你不需要它们，直接访问这些值。

$('#showdata').click(function() {
    $("#maintable tbody tr").each(function(i, v) {
        var myp = "<p>Radio value is = " + $(this).find('input[type=radio]:checked').val() 
                    + "\nText1 value is = " + $(this).find('input[id$=text1]').val() 
                    + "\nText2 value is = " + $(this).find('input[id$=text2]').val() + "</p>";
        $('#thedata').append(myp);

    });
}); 

jsFiddle Demo

您可以在输入文本字段中添加一个 CSS 类以使其更容易获取，但我只使用了 jQuery ends with 选择器。

此外，如果(document) 上的 DOM 树太高，则删除选择器，而是将其限制在尽可能近的位置，在本例中为 #maintable。