Question

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

jsFiddle - ＆gt; 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。

jQuery循环遍历表以显示值

1 个答案: