您的位置：首页 > Web前端 > JavaScript

动态创建表格，更新、提交、循环获取表格中各种元素的数据并转换为JSON，数组的数据格式。

2016-05-25 15:24 926 查看

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title>js表格操作</title>
<style type="text/css">
html,body{ font-family: "微软雅黑";}
h1{ text-align: center;}
#Box{ width: 1024px; margin: auto;}
#Btn input{ width: 100px; height: 40px; margin: 20px;}
table{ width: 100%;border-collapse: collapse;}
table tr{ height: 40px; text-align: center;}
table tr .text1{ width: 99%; height: 38px; border: none;}
table tr .text2{ width: 60px; height: 30px; border: none;}
table td , th{border: 1px solid grey; height: 50px; text-align: center;}
</style>
</head>
<body>
<h1>JS操作表格</h1><hr />
<div id="Box">
<div id="Btn">
<input type="button" value="新增 / 插入" onclick="InsertRow()">
<input type="button" value="全选 / 返选" onclick="SelectAll()">
<input type="button" value="删除 / 选择" onclick="DeleteAll()">
</div>

<table id="Table" border="1" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>操作选择</th>
<th>商品编号</th>
<th>宝贝图片</th>
<th>商品名称</th>
<th>商品价格</th>
<th>文件上传</th>
<th>宝贝详情</th>
<th>操作选项</th>
</tr>
</thead>
<tbody id="tbody">

</tbody>
<tfoot>
<tr>
<td colspan="6"></td>
<td colspan="2"><input style="width: 160px; height: 40px;" type="button" value="编辑 / 更新" onclick="UpData()"> </td>
</tr>
</tfoot>
</table>
</div>
</body>
<script type="text/javascript">

window.JSONARR = [];
var i = 0 , x = 2;

function SelectAll()
{
var Checkbox = document.getElementsByClassName('checkbox');
for(var i = 0; i < Checkbox.length; i++)
{
if(Checkbox[i].checked == true)
{
Checkbox[i].checked = false;
}
else
{
Checkbox[i].checked = true;
}
}
}

function DeleteAll()
{
var Del = document.getElementsByName('del');

if (confirm("您确定要删除选中项吗？"))
{
for(var i = 0; i < Del.length; i++)
{
if(Del[i].checked == true)
{
document.getElementById('Table').deleteRow(i+1);

i = i - 1;
}
}
}
else
{
return false;
}

}

function InsertRow()
{
i ++; x ++;
var Row = document.getElementById('tbody').insertRow();

Row.insertCell().innerHTML = "<input type='checkbox' data-mupiao='123456' data-admin='AAAAAAA' data-names='"+ x +"' name='del' class='checkbox' value='"+ x +"' />";

Row.insertCell().innerHTML = "NO_"+i;

Row.insertCell().innerHTML = "<img src='img/img.png' />";

Row.insertCell().innerHTML = "<input type='text' class='text1' placeholder='宝贝名称'/>";

Row.insertCell().innerHTML = "¥<input type='text' class='text2' placeholder='0.00'/>元";

Row.insertCell().innerHTML = "<input type='file'/>";

Row.insertCell().innerHTML = "宝贝详情!"

Row.insertCell().innerHTML = "<input type='button' style='width: 60px; height: 30px;' value='删除' onclick='DeleteRow(this)'/>";
}

function UpData()
{
window.JSONARR =[];
getValue();

function getValue() {

var tbody = document.getElementById('tbody');
var tr = tbody.getElementsByTagName('tr');
alert("表格总行数：" + tr.length + "行");
for (var i = 0; i < tr.length; i++)
{
window.JSONARR.push({
"Checkbox" : tr[i].cells[0].getElementsByTagName("INPUT")[0].value,
"goods_mupiao" : tr[i].cells[0].getElementsByTagName("INPUT")[0].getAttribute('data-mupiao'),
"goods_names" : tr[i].cells[0].getElementsByTagName("INPUT")[0].getAttribute('data-names'),
"goods_admin" : tr[i].cells[0].getElementsByTagName("INPUT")[0].getAttribute('data-admin'),
"goods_id" : tr[i].cells[1].innerText,
"img_src" : tr[i].cells[2].getElementsByTagName("img")[0].src,
"goods_name" : tr[i].cells[3].getElementsByTagName("INPUT")[0].value,
"goods_rmb" : tr[i].cells[4].getElementsByTagName("INPUT")[0].value,
"goods_info" : tr[i].cells[6].innerText,
})

}
}
alert(JSON.stringify(window.JSONARR));
}

function DeleteRow(obj)
{
if (confirm("您确定要删除吗？"))
{

var Row = document.getElementById('tbody');
Row.deleteRow(obj.parentElement.parentElement.rowIndex - 1);
alert('商品删除成功！');
}
else
{
return false;
}

}

</script>

</html>

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

标签： 动态创建表格数组的数据格式 JSON数组

相关文章推荐

新的分享

章节导航

动态创建表格，更新、提交、循环获取表格中各种元素的数据 并转换为JSON，数组的数据格式。

动态创建表格，更新、提交、循环获取表格中各种元素的数据并转换为JSON，数组的数据格式。