javascript - 使用 Jquery 提取表中每一行的控件值

Question

请看这里:(已更新) DEMO

我正在尝试创建一个逗号 , 和管道 | 分隔的表格每一行中控件值的字符串。每个控制值由逗号分隔，每行由管道分隔，我正在使用这段代码这样做..

$("#btnsave").click(function () {
    var result = "";
    $("#field tr").each(function (iRow, row) {
        $("td input", row).each(function (iField, field) {
            result += $(field).val() + ",";
        });
        result = result + "|";
    });
    alert(result);
});

此代码的问题在于它排除了 DropDown。我还想包括第一列中显示的行号。 虽然我现在正在使用这段代码，但我不太明白其中的内容。有人可以向我解释一下这段代码吗，我是 Jquery 的菜鸟。

Answer 1

添加下拉菜单(我认为您的意思是select元素)相当简单，只需更改$('td input', row) 改为 $('td input, td select', row)。

我创建了一个示例 ( http://jsbin.com/garohure/1/edit )，其中也包含输出中的第一列:

function tableToString(){
    var rows = [];

    $("#field tr").each(function (iRow, row) {

        var cells = [],
            firstTd = $(row).find('td').first();

        cells.push( firstTd.text() );

        $(row).find('input,select').each(function (iField, field) {
            cells.push( $(field).val() );
        });

        rows.push( cells.join('|') );
    });

   return rows.join(',<br>');
}

我的功能有点不同，因为我试图让它更清楚地了解正在发生的事情。我还首先收集数组中的所有值，将其连接到字符串，然后保存。

这里的逻辑是:

• 获取表中的所有行/TR并循环遍历它们
• 获取第一个单元格的值以及该行中所有输入和选择字段的值
• 连接这些值并将它们保存在行数组中
• 完成后，连接行数组中的所有值并返回它们

顺便说一句，将此作为额外的函数，而不是在事件回调中执行所有操作，可以让您轻松地从其他地方(例如用于测试的控制台)执行它。