javascript - 遍历表并在 js/jquery 中创建一个数组

Question

我想遍历我动态创建的表并在每个索引处创建一个项目名称、客户名称和字段率元素数组来填充和传递一个 JSON 对象

这是我的表格的样子:

        <table id="project-table" class="table table-striped table-hover">
        <thead>
        <tr>
            <th>Project Name</th>
            <th>Client Name</th>
            <th>Field Rate</th>
            <th>Delete Row</th>
        </tr>
        </thead>
        <tbody>
        <%--jquery will append our data here...     --%>
        </tbody>
    </table>
    <button type="button" onclick="projectTable()" class="btn btn-primary">Add Row</button>

function projectTable() {

projectRows = projectRows + 1;

var $tbody = $('#project-table').find('tbody');
var $id = $("");
var $tr = $("<tr>");

$id.append(
    "<hidden id='projectId'/>" +
    "<hidden id='projectVersion'/>"
);

$tr.append(
    "<td>" + "<input class='form-control' id='inputProjectName' placeholder='Project Name' type='text'>" + "</td>" +
    "<td>" + "<input class='form-control' id='inputClientName' placeholder='Client Name' type='text'>" + "</td>" +
    "<td>" + "<input class='form-control' id='inputRate' placeholder='Rate' type='text'></td>" +
    "<td>" + "<input type='button' value='Delete' onclick='deleteRow(this)'>" + "</td>");
$tbody.append($id);
$tbody.append($tr);}

每次单击“添加新行”按钮时都会调用 projectTable()。 我希望能够根据已创建的行数创建一个数组，其中包含来自每一行的信息，如下所示:

            projectList: [
            {
                id: projectId,
                version: projectVersion,
                projectName: projectName,
                clientName: clientName,
                fieldRate: fieldRate
            }

但是对于多个对象，我尝试了一些不同的 for 循环，但它们对我不起作用。

Answer 1

您可以通过选择所有 tr 然后为每个选择 input 元素来构建您的数据。

您当前代码中的一些问题:

• 行中不能有静态 id 属性值，因为 id 值必须是唯一的
• 自定义 hidden 元素不能是 tbody 的子元素。我不明白你怎么会需要这个元素。

我已经更改了您的代码中的一些其他内容，使其更像 jQuery:

function projectTable() {
    $('#project-table>tbody').append(
        $("<tr>").append(
            $("<td>").append($("<input>").addClass("form-control")
                .attr({placeholder: "Project Name", type: "text"})),
            $("<td>").append($("<input>").addClass("form-control")
                .attr({placeholder: "Client Name", type: "text"})),
            $("<td>").append($("<input>").addClass("form-control")
                .attr({placeholder: "Rate", type: "text"})),
            $("<td>").append($("<input>").addClass("form-control delete")
                .attr({type: "button"}).val("Delete"))
        )
    );
}

$(document).on("click", ".delete", function () {
    $(this).closest("tr").remove();
});

$('#get').click(function () {
    var data = $.map($('#project-table>tbody>tr'), function (tr) {
        var $inp = $('input', tr);
        return {
            project: $inp.eq(0).val(),
            client: $inp.eq(1).val(),
            rate: $inp.eq(2).val(),
        };
    });
    $('#jsonout').text(JSON.stringify(data, null, 2));    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="project-table" class="table table-striped table-hover">
    <thead>
    <tr>
        <th>Project Name</th>
        <th>Client Name</th>
        <th>Field Rate</th>
        <th>Delete Row</th>
    </tr>
    </thead>
    <tbody>
    </tbody>
</table>
<button type="button" onclick="projectTable()" class="btn btn-primary">Add Row</button>
<button type="button" id="get" class="btn btn-primary">Get JSON</button>
<pre id="jsonout"></pre>