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);}

每次单击Add new Row按钮时都会调用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>

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

1 个答案: