首页 > 代码库 > HTML中Table行单元格的删除、增加、修改、确定
HTML中Table行单元格的删除、增加、修改、确定
<!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=utf-8" />
<title>动态增删和修改表格</title>
<script type="text/javascript">
function add(){
var table1=document.getElementById("mytable").insertRow(1);
var addRow1=table1.insertCell(0);
addRow1.innerHTML="<input type=‘text‘ value=http://www.mamicode.com/‘第一件‘ />";
var addRow2=table1.insertCell(1);
addRow2.innerHTML="<input type=‘text‘ value=http://www.mamicode.com/‘1‘ />";
var addRow1=table1.insertCell(2);
addRow1.innerHTML="<input type=‘button‘ value=http://www.mamicode.com/‘删除‘ onclick=‘del(this)‘/>";
}
function del(tt){
var table2=document.getElementById("mytable");
table2.deleteRow(tt.parentNode.parentNode.rowIndex)
}
function sure(su){
var table4=document.getElementById("mytable").rows;
var rowss=su.parentNode.parentNode.rowIndex;
var cellss=table4[rowss].cells[1];
cellss.innerHTML=document.getElementById("id1").value;
var cellss2=table4[rowss].cells[0];
cellss2.innerHTML=document.getElementById("id2").value;
}
function change(ch){
var table3=document.getElementById("mytable").rows;
var rowss=ch.parentNode.parentNode.rowIndex;
var cellss=table3[rowss].cells[1];
var oldR=cellss.innerHTML;
cellss.innerHTML="<input type=‘text‘ id=‘id1‘ value=http://www.mamicode.com/‘‘ />";
document.getElementById("id1").value=http://www.mamicode.com/oldR;
var cellss2=table3[rowss].cells[0];
var oldR2=cellss2.innerHTML;
cellss2.innerHTML="<input type=‘text‘ id=‘id2‘ value=http://www.mamicode.com/‘‘ />";
document.getElementById("id2").value=http://www.mamicode.com/oldR2;
}
</script>
</head>
<body>
<table id="mytable" border="1" cellspacing="0">
<tr><td>商品名称</td><td>数量</td><td>操作</td></tr>
<tr><td>第一件</td><td>1</td><td><input type="button" value="http://www.mamicode.com/删除" / onclick="del(this)"><input type="button" value="http://www.mamicode.com/确定" / onclick="sure(this)"><input type="button" value="http://www.mamicode.com/修改" / onclick="change(this)"></td></tr>
<tr><td>第二件</td><td>1</td><td><input type="button" value="http://www.mamicode.com/删除" / onclick="del(this)"><input type="button" value="http://www.mamicode.com/确定" / onclick="sure(this)"><input type="button" value="http://www.mamicode.com/修改" / onclick="change(this)"></td></tr>
<tr><td>第三件</td><td>1</td><td><input type="button" value="http://www.mamicode.com/删除" / onclick="del(this)"><input type="button" value="http://www.mamicode.com/确定" / onclick="sure(this)"><input type="button" value="http://www.mamicode.com/修改" / onclick="change(this)"></td></tr>
<tr><td colspan="3" align="center"><input type="button" value="http://www.mamicode.com/增加订单" / onclick="add()"></td></tr>
</table>
</body>
</html>
HTML中Table行单元格的删除、增加、修改、确定