Dom操作表格的添加行，删除行，修改行， -

koudailidexiaolong

浏览: 96153 次
性别:
来自: 西安

最近访客更多访客>>

hjz

Blue丶s

doc30000

钰芯lyy

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

Dom操作表格的添加行，删除行，修改行，

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>无标题文档</title>
<script type="text/javascript">
//每一行的索引
var index = 3;
function btnAddRow(){
//创建新行的id
var rId = "tr" + index;
//随机数
var ranPrice = "￥" + Math.round((Math.random() * 100));
//table对象
var table1 = document.getElementById("table1");
//行数
var rowCount = table1.rows.length;
//添加到最后一行
var newRow = table1.insertRow(rowCount);
//添加ID
newRow.id = rId;
//给第一列添加
var newCell1 = newRow.insertCell(0);
//内容
newCell1.innerHTML = "西游记"+index;
//给第二列添加
var newCell2 = newRow.insertCell(1);
//内容
newCell2.innerHTML = ranPrice;
//给第三列添加
var newCell3 = newRow.insertCell(2);
//内容
newCell3.innerHTML = "<input type='button' name='button' id='button' value='删除' onclick='btnDelRow(\""+rId+"\")' />";
//alert(newCell3.innerHTML);
//变量++
index ++;
}

function btnUpdateRow(rowId){
//行对象
var delRow = document.getElementById(rowId);
//获取当前行的第1列的文本框
var items = delRow.cells[1].getElementsByTagName("input");
//获取当前文本框的值
var price = "￥"+items[0].value;
//修改当前行的第一列的文本
delRow.cells[1].innerHTML = price;

//修改当前行的第二列的文本
delRow.cells[2].innerHTML = "<input type='button' name='button' id='button' value='删除' onclick='btnDelRow(\""+rowId+"\")' /> <input type='button' value='修改' onclick='btnEditRow(\""+rowId+"\")'/>";
}

function btnEditRow(rowId){
//行对象
var delRow = document.getElementById(rowId);
//获取当前行的第1列的文本
var price = delRow.cells[1].innerHTML.substring(1);
//修改当前行的第1列
delRow.cells[1].innerHTML = "<input type='text' size='2' value='"+price+"'/>";
//修改当前行的第2列
delRow.cells[2].innerHTML = "<input type='button' name='button' id='button' value='删除' onclick='btnDelRow(\""+rowId+"\")' /> <input type='button' value='确定' onclick='btnUpdateRow(\""+rowId+"\")'/>";
}

function btnDelRow(rowId){
//行对象
var delRow = document.getElementById(rowId);
//行的数
var delRowIndex = delRow.rowIndex;
//表对象
var table1 = document.getElementById("table1");
//删除
table1.deleteRow(delRowIndex);
}
</script>
</head>