遍历 table 并在 js/jquery 中创建一个数组

Question

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

这是我的 table 的样子：

        <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

您可以通过 selecting 所有 tr 然后为每个 select 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>

遍历 table 并在 js/jquery 中创建一个数组

Iterate through table and create an array in js/jquery

javascript

arrays

jquery

html-table

tablerow