JQuery表格Table操作-获取表格数据/向表格填充数据

一个菜鸟耶

已于 2023-06-30 15:34:26 修改

阅读量1.4k

点赞数 6

分类专栏： JQuery 文章标签： jquery 前端前端框架

于 2023-06-30 14:59:42 首次发布

本文链接：https://blog.csdn.net/qq_47189438/article/details/131472984

版权

JQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

演示表格
商品名称	商品代码	数量
1.5L 1支泡沫	POSM1500-PM-1	1
邮政10号箱	PostBox-10	3
邮政7号箱	PostBox-7	9

<table class="OperateTable">
    <thead>
        <tr>
            <th>商品名称</th>
            <th>商品代码</th>
            <th>数量</th>
        </tr>
    </thead>
    <tbody>
        @{
            foreach (Product item in Model)
            {
                <tr>
                    <td>@item.Name</td>
                    <td>@item.CustomCode</td>
                    <td>@item.Count</td>
                </tr>
            }
        }
    </tbody>
</table>

1.获取表格数据

var arr = [];
$(".OperateTable tr:not(:first)").each(function () {
     var obj = {};
     obj.name = $(this).find("td:eq(0)").text();
     obj.customCode= $(this).find("td:eq(1)").text();
     obj.count = $(this).find("td:eq(2)").text();
     arr.push(obj);
});
console.log(arr);

2.向表格填充数据

 //添加数据到表格
for (var i = 0; i < arr.length; i++) {
      $(".OperateTable").append("<tr><td>" +
          arr[i].name + "</td><td>" +
          arr[i].customCode + "</td><td>" +
          arr[i].count + "</td><td>" + "</td></tr>"
      );
}