动态生成的表格,单个tr数据提交

在学习django+python工程时遇到数据提交的一些问题,做下记录。

在生成的动态表格中,提交单行tr里的数据。(弄了很久才成功)代码如下:

html:

<form method="post" id="form" name="form">
<ul>
<li>
用例名称:<input name="case_name" value="">
</li>
<li><span><button type="submit" onclick="req()">查询</button></span></li>
</ul>
<table border="1" id="table" style="width: 60%">
<thead>
<tr>
<th>序号</th>
<th>用例名称</th>
<th>测试环境IP</th>
<th>备注</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{% for name in data %}
<tr>
<td style="width: 5%"><input name="id" value="{{ name.id }}" style="width: 100%"></td>
<td style="width: 20%"><input name="case" value="{{ name.case_name }}" style="width: 100%"></td>
<td style="width: 25%"><input name="url" value="{{ name.url }}" style="width: 100%"></td>
<td style="width: 30%"><input name="remark" value="{{ name.remark }}" style="width: 100%"></td>
<td style="width: 15%">
<input id="{{ name.id }}" name="implement" class="but" type="button" value="执行"
onclick="submitForm(this)">  //执行点击时将this传过去。
<input id="{{ name.id }}" name="edit" class="but" type="button" value="编辑"
onclick="submitForm(this)">
<input id="{{ name.id }}" name="delete" class="but" type="button" value="删除"
onclick="submitForm(this)">
</td>
</tr>
{% endfor %}
</tbody>
</table>
</form>

js:

function submitForm(node) {
var tr = node.parentNode.parentNode; //获取当前元素的父节点的父节点,也就是tr。
var arr = [];
for (var i = 0; i < tr.children.length; i++) { //获取td的数量
input_name = tr.cells[i].children[0].name;//取得元素的name属性的值
text = tr.cells[i].children[0].value;//取得value值

//组装数据使用ajax传到后台,用了不少种类的数据传送,这样传的比较方便使用。
arr.push({ 
'name': input_name ,
'value': text,
});
}
$.ajax({
type: "POST",
url: "/result/",
data: arr,
error: function (request) {
console.log("error");
alert("fail")
},
success: function (data) {
console.log("success");
alert("success")
}
})
}

 

posted @ 2018-08-07 17:31  time_zhang  阅读(587)  评论(0编辑  收藏  举报