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

Posted 2023-05-09

【中文标题】遍历表并在 js/jquery 中创建一个数组

【英文标题】：Iterate through table and create an array in js/jquery

【发布时间】：2018-01-30 22:30:26

【问题描述】：

我想遍历我的动态创建的表，并在每个索引处创建一个包含项目名称、客户名称和字段速率的元素数组，以填充和传递 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 循环，但它们对我不起作用。

【问题讨论】：

你试过什么？像$('#project-table').find('tr').each(...) 这样的简单循环遍历所有行，您只需从<td> 元素中提取所需的数据！？

我遇到的问题是弄清楚如何仅从前三个中提取数据，因为我不希望删除按钮成为提取的一部分。

【参考方案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>

【讨论】：

我需要 Id 和版本来更新对象。有没有更好的方法来处理这种事情？

是的，您可以将data- 属性放在tr 元素上。

我最终选择了一条不同的路线，但确实发现这是一个有用的起点。感谢您的帮助。