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>
<style type="text/css">
.titlee{
text-align:left;
font-size:16px;
background:#CCC;
font-weight:400;}
table{
text-align:left;
}
</style>
<script type="text/javascript">
function add(){
var nowRows=document.getElementById("mytable").rows;
var rows1=nowRows.length-1;
var table1=document.getElementById("mytable").insertRow(rows1);
var addRow1=table1.insertCell(0);
addRow1.innerHTML="<input type='text' id='num"+rows1+"' value='煎饼果子来一套' />";
var addRow2=table1.insertCell(1);
addRow2.innerHTML="<input type='text' id='id"+rows1+"' value='1' />";
var addRow1=table1.insertCell(2);
addRow1.innerHTML="<input type='button' value='删除' onclick='del(this)'/><input type='button' value='确定' onclick='sure(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("id"+rowss).value;
var cellss2=table4[rowss].cells[0];
cellss2.innerHTML=document.getElementById("num"+rowss).value;
var tableCell1=su.parentNode;
tableCell1.innerHTML="<input type='button' value='删除' onclick='del(this)'/><input type='button' value='修改' onclick='change(this)'/>";
}
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='id"+rowss+"' value='' />";
document.getElementById("id"+rowss).value=oldR;
var cellss2=table3[rowss].cells[0];
var oldR2=cellss2.innerHTML;
cellss2.innerHTML="<input type='text' id='num"+rowss+"' value='' />";
document.getElementById("num"+rowss).value=oldR2;
var tableCell1=ch.parentNode;
tableCell1.innerHTML="<input type='button' value='删除' onclick='del(this)'/><input type='button' value='确定' onclick='sure(this)' />";

}
</script>
</head>

<body>
<table id="mytable" border="1" align="center" cellspacing="0" style="width:800px;margin:0 auto; table-layout:fixed">
<tr class="titlee"><td>商品名称</td><td>数量</td><td>操作</td></tr>
<tr><td>祖传大力丸</td><td>10</td><td><input type="button" value="删除" / onclick="del(this)"><input type="button" value="修改"onclick="change(this)" /></td></tr>
<tr><td>高级尿不湿</td><td>10</td><td><input type="button" value="删除" / onclick="del(this)"><input type="button" value="修改" / onclick="change(this)" ></td></tr>
<tr><td>六味地黄丸</td><td>5</td><td><input type="button" value="删除" / onclick="del(this)"><input type="button" value="修改" / onclick="change(this)"></td></tr>
<tr><td colspan="3" align="center"><input type="button" value="增加订单" / onclick="add()"></td></tr>
</table>

———————————————————————————————————————————————————————

</style>
<script type="text/javascript">
function addRow(){
var addTable=document.getElementById("order");
var row_index=addTable.rows.length-1; //新插入行在表格中的位置
var newRow=addTable.insertRow(row_index); //插入新行
newRow.id="row"+row_index; //设置新插入行的ID

var col1=newRow.insertCell(0);
col1.innerHTML="<input id='a"+row_index+"' style='width:160px;' type='text' />";

var col2=newRow.insertCell(1);
col2.innerHTML="<input id='b"+row_index+"' style='width:30px;' type='text' />";

var col3=newRow.insertCell(2);
col3.innerHTML="<input id='c"+row_index+"' style='width:30px;' type='text' />";

var col4=newRow.insertCell(3);
col4.innerHTML="<input name='del"+row_index+"' type='button' value='删除' onclick=\"delRow('row"+row_index+ "')\" /> <input id='edit"+row_index+"' type='button' value='确定' onclick=\"upRow('row"+row_index+ "')\" />";

}

function delRow(rowId){
var row=document.getElementById(rowId).rowIndex; //删除行所在表格中的位置
document.getElementById("order").deleteRow(row);
}

function editRow(rowId){
var row=document.getElementById(rowId).rowIndex; //修改行所在表格中的位置
var col=document.getElementById(rowId).cells;
var texta=col[0].innerHTML;
col[0].innerHTML="<input name='a"+row+"' style='width:160px;' type='text' value='"+texta+"' />";
var textb=col[1].innerHTML;
col[1].innerHTML="<input name='b"+row+"' style='width:30px;' type='text' value='"+textb+"' />";
var textc=col[2].innerHTML;
col[2].innerHTML="<input name='b"+row+"' style='width:30px;' type='text' value='"+textc+"' />";

col[3].lastChild.value="确定";
col[3].lastChild.setAttribute("onclick","upRow('"+rowId+ "')");

}

function upRow(rowId){
var row=document.getElementById(rowId).rowIndex; //修改行所在表格中的位置
var col=document.getElementById(rowId).cells;
var texta=col[0].firstChild.value;
var textb=col[1].firstChild.value;
var textc=col[2].firstChild.value;
col[0].innerHTML=texta;
col[1].innerHTML=textb;
col[2].innerHTML=textc;

col[3].lastChild.value="修改";
col[3].lastChild.setAttribute("onclick","editRow('"+rowId+ "')");

}
</script>
</head>

<body><table width="100%" border="0" cellspacing="0" cellpadding="0" id="order">
<tr class="title">
<td>商品名称</td>
<td>数量</td>
<td>单价</td>
<td>操作</td>
</tr>
<tr id="row1">
<td>玫瑰保湿睡眠面膜</td>
<td>5</td>
<td>¥48</td>
<td><input name="del" type="button" value="删除" onclick='delRow("row1")' />
<input name="edit" type="button" value="修改" onclick='editRow("row1")' /></td>
</tr>
<tr>
<td style="text-align:center; height:30px;" colspan="4">
<input name="bsn" type="button" value="增加定单" onclick="addRow()" /></td>
</tr>
</table>

</body>
</html>

posted @ 2014-11-05 16:33 Sunny森阅读(1316) 评论(0) 收藏举报

我叫小森

HTML中Table行单元格的删除、增加、修改、确定

公告