我有一个表格如下,tr的id都是自增的
每一行都是一个单独的商品,所以想将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复制下来可以直接用
谢邀。
上面这种形式?(PS:我处理成了json字符串,你可以注释代码看数组输出样式,传输还是穿json的好)
建议转成对象数组的方式即可。
代码