我想遍历我动态创建的表,并在每个索引处创建一个元素项目名称,客户端名称和字段速率数组,以填充和传递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循环,但它们对我没用。
答案 0 :(得分:4)
您可以选择所有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>