表格中如何将每一行tr包装成单独的数组?

我有一个表格如下,tr的id都是自增的
clipboard.png

每一行都是一个单独的商品,所以想将tr里 3个td的值封装在一个数组里,然后提交的时候批量提交好几个商品(其实也就是提交好几个tr的数组)

大致效果是这样:

{"tr1":array1,"tr2":array2,"tr3":array3}
或者
{"0":array1,"1":array2,"2":array3}
两种形式数组都行

我自己写的H5代码如下:

<html xmlns="http://www.w3.org/1999/html">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>js图片预览功能</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

</head>
<body>
<form>
    <table id="test">
        <thead>
            <tr>
                <th>sku</th>
                <th>name</th>
                <th>price</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    <input type="button" id="btn2" value="在末尾增加">
    <input type="button" id="submit" value="提交">
</form>
</body>
<script>
    var int  = 0;
    $("#btn2").click(function() {
        $("#test tbody").append("<tr id='tr"+int+"'><td><input type='text'></td>" +
            "<td><input type='text'></td>" +
            "<td><input type='text'></td></tr>");
        int++;
    });
    
    $('#submit').on('click',function () {
        var arr = new Array();
        var trArr = new Array();
        var trLength = $('tbody tr').length;
        var tdLength = $('tbody tr').eq(0).children().length;   //同一表格的tr的子集td个数一样,所以直接获取第一行tr的td个数
        var trList = $("tbody").children("tr")
        for (var i = 0; i < trLength; i++){
            var tdArr = trList.eq(i).find("td");
            var text1 = tdArr.eq(0).find("input").val();
            var text2 = tdArr.eq(1).find("input").val();
            var text3 = tdArr.eq(2).find("input").val();
            console.log(text1)
            console.log(text2)
            console.log(text3)
        }
    })
</script>
</html>

现在获取了td里的值 但不知道如何封装数组,还请哪位高手指点一下 代码里的js是用的CDN复制下来可以直接用

阅读 3.8k
1 个回答

谢邀。

clipboard.png

上面这种形式?(PS:我处理成了json字符串,你可以注释代码看数组输出样式,传输还是穿json的好)

建议转成对象数组的方式即可。

代码

    $('#submit').on('click', function () {
        var arr = new Array();
        var trArr = new Array();
        var trLength = $('tbody tr').length;
        var tdLength = $('tbody tr').eq(0).children().length;   //同一表格的tr的子集td个数一样,所以直接获取第一行tr的td个数
        var trList = $("tbody").children("tr")
        for (var i = 0; i < trLength; i++) {
            var tdArr = trList.eq(i).find("td");
            var text1 = tdArr.eq(0).find("input").val();
            var text2 = tdArr.eq(1).find("input").val();
            var text3 = tdArr.eq(2).find("input").val();
            arr.push({'sku':text1,'name':text2,'price':text3});
        }
        arr = JSON.stringify(arr); // 转json字符串
        console.log(arr);
    })
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题