JS grid add delete save
<script type="text/javascript">var $ = function(id){
return document.getElementById(id);
}
//全选
function checkAll(target) {
var checkeds = document.getElementsByName("b_id");
for (var i = 0; i < checkeds.length; i++) {
checkeds.checked = target.checked;
}
}
//刷新行号
function refreshRowNo() {
var tbody = $("tbody");
for (var i = 0; i < tbody.rows.length; i++) {
tbody.rows.cells.innerHTML = i + 1;
}
}
//添加行
function AddRow() {
var tbody = $("tbody");
var row = tbody.insertRow(tbody.rows.length);
row.insertCell(row.cells.length);
row.insertCell(row.cells.length).innerHTML = '<input type="checkbox" name="b_id" />';
row.insertCell(row.cells.length).innerHTML = '<input type="text" name="name" />';
row.insertCell(row.cells.length).innerHTML = '<input type="text" name="number" />';
row.insertCell(row.cells.length).innerHTML = '<input type="text" name="price" />';
row.insertCell(row.cells.length).innerHTML = '<input type="text" name="sum" />';
refreshRowNo();
}
//删除行
function DelRow() {
var checkeds = document.getElementsByName("b_id");
var ischeck = false;
for (var i = checkeds.length - 1; i >= 0; i--) {
if (checkeds.checked) {
ischeck = true;
break;
}
}
if (ischeck) {
if (confirm("确定删除选中行?")) {
for (var i = checkeds.length - 1; i >= 0; i--) {
if (checkeds.checked) {
var index = checkeds.parentNode.parentNode.rowIndex;
$("tbody").deleteRow(index - 1);
}
}
refreshRowNo();
}
} else {
alert("请选中需要删除的行!");
}
}
//保存
function Save() {
var detail = [],
tbody = $("tbody");
for (var i = 0; i < tbody.rows.length; i++) {
var name = tbody.rows.cells.childNodes.value;
var number = tbody.rows.cells.childNodes.value;
var price = tbody.rows.cells.childNodes.value;
var sum = tbody.rows.cells.childNodes.value;
var item = name + "^" + number + "^" + price + "^" + sum;
detail.push(item);
}
var detailstr = detail.join("|");
$("detail").value = detailstr;
$("myform").submit();
}
</script>
<form name="myform" action="AddOrder.aspx" method="post">
<input type="hidden" id="detail" name="detail" />
<ul>
<li>采购单编号：<input type="text" id="CGDBH" name="CGDBH" /></li>
<li>
供应商名称：<input type="text" id="GYSMC" name="GYSMC" />
<input type="button"value="增加一行" />
<input type="button"value="删除" />
<input type="button"value="保存" />
</li>
</ul>
<table cellpadding="1" cellspacing="2">
<tr>
<th style="width:60px">序号</th>
<th style="width:20px"><input type="checkbox"/></th>
<th style="width:120px">名称</th>
<th style="width:120px">数量</th>
<th style="width:120px">单价</th>
<th style="width:120px">总金额</th>
</tr>
<tbody id="tbody">
<tr>
<td>1</td>
<td><input type="checkbox" name="b_id" /></td>
<td><input type="text" name="name" /></td>
<td><input type="text" name="number" /></td>
<td><input type="text" name="price" /></td>
<td><input type="text" name="sum" /></td>
</tr>
</tbody>
</table>
</form>
页:
[1]