您的位置：首页 > 其它

table 表提交数据（不用对应input版）

2015-04-29 16:45 309 查看

<!doctype html>
<html>
<head><title>table 表提交数据（不用对应input版）</title></head>

<body>

<div id="table-div">
<table id="table-batabase">
<tr><th>编号</th><th>名字</th><th>年龄</th><th>性别</th><th>爱好</th></tr>
<tr><td>1</td><td>小明</td><td>20</td><td>男</td><td>篮球</td></tr>
<tr><td>2</td><td>小猪</td><td>1</td><td>女</td><td>游泳</td></tr>
<tr><td>3</td><td>小狗</td><td>3</td><td>女</td><td>吃饭</td></tr>
</table>
</div>
<div id="dongzuo">
<form id="myform" action="test.php" method="post">
<input id="JSONText" name="jsontext" type="text" value=""/>
</form>
<button id="save-cookie">暂存</button><button id="save">提交</button>
</div>

<script type="text/javascript">
var cookie = document.getElementById('save-cookie');
var save = document.getElementById('save');
var table = document.getElementById('table-batabase');
var myform = document.getElementById('myform');

cookie.onclick = function(){
alert('你点击了暂存功能');
}
save.onclick = function(){
//alert(table.rows.length);
var tr;
var dataArray = new Array();
for(var i=1;i<table.rows.length;i++){
date = new Object();
tr = table.rows[i];
date.Code = tr.childNodes[0].innerHTML;
date.Name = tr.childNodes[1].innerHTML;
date.Age = tr.childNodes[2].innerHTML;
date.Sex = tr.childNodes[3].innerHTML;
date.Like = tr.childNodes[4].innerHTML;
//将table表对象转换成数组装成json放在数组里
dataArray.push(JSON.stringify(date));
}
//将数组装成json放在数组里
document.getElementById('JSONText').value = dataArray.toString();
myform.submit();
}
</script>
</body>
</html>

思路：将table里的值取出，放在json中，赋给一个input，通过一个input来实现table表数据提交到服务器，就可以避免页面存在太多input框。
关键点:
1. rows/childNodes 获取某元素下的所有子节点；
2. JSON.stringify(?) 将对象转为json数据；
3. dataArray.toString() 将数组转换成json。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： table input 提交数据

相关文章推荐

新的分享

章节导航