javascript - 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 .