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

删除行js动态表格之一实现部分（2）

2013-05-03 20:01 429 查看

最近使用开发的过程中出现了一个小问题，顺便记录一下原因和方法--删除行

每日一道理

书籍好比一架梯子，它能引领人们登上文化的殿堂；书籍如同一把钥匙，它将帮助我们开启心灵的智慧之窗；书籍犹如一条小船，它会载着我们驶向知识的海洋。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>增长Table行</title>
</head>
<body>
<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[i].checked=target.checked;
}
}

//刷新行号
function refreshRowNo(){
var tbody = $("tbody");
for (var i =0;i<tbody.rows.length;i++){
tbody.rows[i].cells[0].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[i].checked) {
ischeck = true;
break;
}
}
if (ischeck) {
if (confirm("定确删除中选行?")) {
for (var i = checkeds.length - 1; i >= 0; i--) {
if (checkeds[i].checked) {
var index = checkeds[i].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[i].cells[2].childNodes[0].value;
var number = tbody.rows[i].cells[3].childNodes[0].value;
var price = tbody.rows[i].cells[4].childNodes[0].value;
var sum = tbody.rows[i].cells[5].childNodes[0].value;
var item = name + "^" + number + "^" + price + "^" + sum;
detail.push(item);
}
var detailstr = detail.join("|");
$("detail").value = detailstr;
$("myform").submit();
}

</script>

<form id="myform" name="myform" action="" method="post">
<input type="hidden" id="detail" name="detail" />
<ul>
<li>洽购单编号：<input type="text" id="CGDBH" name="number" /></li>
<li>
供应商名称：<input type="text" id="GYSMC" name="supplier" />
<input type="button" onclick="AddRow()" value="增长一行" />
<input type="button" onclick="DelRow()" value="删除" />
<input type="button" onclick="Save()" value="保存" />
</li>
</ul>
<table cellpadding="1" cellspacing="2">
<tr>
<th style="width:60px">序号</th>
<th style="width:20px"><input type="checkbox" onclick="checkAll(this)" /></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>
<?php
echo "<pre>";
print_r($_POST);
echo "</pre>";
?>
</body>
</html>

文章结束给大家分享下程序员的一些笑话语录：祝大家在以后的日子里. 男生象Oracle般健壮; 女生象win7般漂亮; 桃花运象IE中毒般频繁; 钱包如Gmail容量般壮大, 升职速度赶上微软打补丁，追女朋友像木马一样猖獗，生活像重装电脑后一样幸福，写程序敲代码和聊天一样有**。

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

标签：

相关文章推荐

新的分享

章节导航