100分送上，关于增加行、删除行有关问题

100分送上，关于增加行、删除行问题！
No. 项目名称单位数量显示
1 测试一斤 2 ++ --
2 测试二斤 3 ++ --
3 ++ --
4 ++ --

问题如下：++表示增加一行，--表示删除一行，例如：我点击3右边的++,表示在3的下面增加一行，而第4行就变成了第5行。如果我点1右边的++（--也是一样），就像如下：

No. 项目名称单位数量显示
1 测试一斤 2 ++ --
2 ++ --
3 测试二斤 3 ++ --
4 ++ --
5 ++ --

我应该怎么实现？http://home.focus.cn/group/calc/zxjsq_zong.php这个网站实现了这个功能。。。大家帮忙分析一下，谢谢！

[解决办法]
看不到页面只能猜着做，看看吧：
<html xmlns:v= "urn:schemas-microsoft-com:vml "
xmlns:o= "urn:schemas-microsoft-com:office:office "
xmlns= "http://www.w3.org/TR/REC-html40 ">
<head>
<META http-equiv= "Content-Type " content= "text/html; Charset=gbk ">
<META HTTP-EQUIV= "pragma " CONTENT= "no-cache ">
<META HTTP-EQUIV= "Cache-Control " CONTENT= "no-cache, must-revalidate ">
<title> VML_Clock </title>

<STYLE>
</STYLE>
<script>
function addRow()
{
var rowIndex = event.srcElement.parentNode.parentNode.rowIndex;
var tb = document.getElementById( "tb ");
var tr = tb.insertRow(rowIndex + 1);
var td = tr.insertCell();
td = tr.insertCell();
td.innerHTML = "名称 ";
td = tr.insertCell();
td.innerHTML = "斤 ";
td = tr.insertCell();
td.innerHTML = "1 ";
td = tr.insertCell();
td.innerHTML = " <span style=\ "cursor:hand;\ " onclick=\ "addRow()\ "> ++ </span> <span style=\ "cursor:hand;\ " onclick=\ "delRow()\ "> -- </span> ";
for (var i = rowIndex + 1; i < tb.rows.length; i++)
{
tb.rows(i).cells(0).innerHTML = i;
}
}
function delRow()
{
var rowIndex = event.srcElement.parentNode.parentNode.rowIndex;
event.srcElement.parentNode.parentNode.removeNode(true);
for (var i = rowIndex; i < tb.rows.length; i++)
{
tb.rows(i).cells(0).innerHTML = i;
}
}
</script>
</head>

<body>
<table id= "tb ">
<tr> <td> No. </td> <td> 项目名称 </td> <td> 单位 </td> <td> 数量 </td> <td> 显示 </td> </tr>
<tr> <td> 1 </td> <td> 测试一 </td> <td> 斤 </td> <td> 2 </td> <td> <span style= "cursor:hand; " onclick= "addRow() "> ++ </span> <span style= "cursor:hand; " onclick= "delRow() "> -- </span> </td> </tr>
<tr> <td> 2 </td> <td> 测试二 </td> <td> 斤 </td> <td> 3 </td> <td> <span style= "cursor:hand; " onclick= "addRow() "> ++ </span> <span style= "cursor:hand; " onclick= "delRow() "> -- </span> </td> </tr>
<tr> <td> 3 </td> <td> 测试三 </td> <td> 斤 </td> <td> 数量 </td> <td> <span style= "cursor:hand; " onclick= "addRow() "> ++ </span> <span style= "cursor:hand; " onclick= "delRow() "> -- </span> </td> </tr>
</table>

</body>
</html>
[解决办法]
楼上的兄弟做复杂了，可以修改下
<html xmlns:v= "urn:schemas-microsoft-com:vml "
xmlns:o= "urn:schemas-microsoft-com:office:office "
xmlns= "http://www.w3.org/TR/REC-html40 ">
<head>
<META http-equiv= "Content-Type " content= "text/html; Charset=gbk ">
<META HTTP-EQUIV= "pragma " CONTENT= "no-cache ">
<META HTTP-EQUIV= "Cache-Control " CONTENT= "no-cache, must-revalidate ">
<title> VML_Clock </title>
<STYLE>
</STYLE>
<script>
function addRow(obj)
{
var objTR=obj.parentNode.parentNode
var rowIndex=objTR.rowIndex
objTR.parentNode.insertBefore(objTR.cloneNode(true),objTR)
}
function delRow(obj)
{
obj.parentNode.parentNode.removeNode(true)
}
</script>
</head>

<body>
<table id= "tb ">
<tr> <td> No. </td> <td> 项目名称 </td> <td> 单位 </td> <td> 数量 </td> <td> 显示 </td> </tr>
<tr> <td> 1 </td> <td> 测试一 </td> <td> 斤 </td> <td> 2 </td> <td> <span style= "cursor:hand; " onclick= "addRow(this) "> ++ </span> <span style= "cursor:hand; " onclick= "delRow(this) "> -- </span> </td> </tr>

<tr> <td> 2 </td> <td> 测试二 </td> <td> 斤 </td> <td> 3 </td> <td> <span style= "cursor:hand; " onclick= "addRow(this) "> ++ </span> <span style= "cursor:hand; " onclick= "delRow(this) "> -- </span> </td> </tr>
<tr> <td> 3 </td> <td> 测试三 </td> <td> 斤 </td> <td> 数量 </td> <td> <span style= "cursor:hand; " onclick= "addRow(this) "> ++ </span> <span style= "cursor:hand; " onclick= "delRow(this) "> -- </span> </td> </tr>
</table>

</body>
</html>
[解决办法]
<html>
<head>
<META http-equiv= "Content-Type " content= "text/html; charset=gbk ">
<META HTTP-EQUIV= "pragma " CONTENT= "no-cache ">
<title> </title>
<STYLE>
</STYLE>
<script>
function addRow()
{
var rowIndex = event.srcElement.parentNode.parentNode.rowIndex;
var tb = document.getElementById( "tb ");
var tr = tb.insertRow(rowIndex + 1);
var td = tr.insertCell();
td = tr.insertCell();
td.innerHTML = " <input name= 'mc ' value= 'nnn "+(rowIndex + 1)+ " ' style= 'border:0px; ' readonly> ";
td = tr.insertCell();
td.innerHTML = " <input name= 'dw ' value=\ "nnn\ " style= 'border:0px; ' readonly> ";
td = tr.insertCell();
td.innerHTML = " <input name= 'sl ' value=\ "n\ " style= 'border:0px; ' readonly> ";
td = tr.insertCell();
td.innerHTML = " <span style=\ "cursor:hand;\ " onclick=\ "addRow()\ "> ++ </span> <span style=\ "cursor:hand;\ " onclick=\ "delRow()\ "> -- </span> ";
for (var i = rowIndex + 1; i < tb.rows.length; i++)
{
tb.rows(i).cells(0).innerHTML = i;
}
}
function delRow()
{
var rowIndex = event.srcElement.parentNode.parentNode.rowIndex;
event.srcElement.parentNode.parentNode.removeNode(true);
for (var i = rowIndex; i < tb.rows.length; i++)
{
tb.rows(i).cells(0).innerHTML = i;
}
}
</script>
</head>

<body>
<table id= "tb ">
<tr> <td> No. </td> <td> aaaa </td> <td> bbbb </td> <td> cccc </td> <td> dddd </td> </tr>
<tr> <td> 1 </td> <td> a </td> <td> a </td> <td> 2 </td> <td> <span style= "cursor:hand; " onclick= "addRow() "> ++ </span> <span style= "cursor:hand; " onclick= "delRow() "> -- </span> </td> </tr>
<tr> <td> 2 </td> <td> a </td> <td> a </td> <td> 3 </td> <td> <span style= "cursor:hand; " onclick= "addRow() "> ++ </span> <span style= "cursor:hand; " onclick= "delRow() "> -- </span> </td> </tr>
<tr> <td> 3 </td> <td> a </td> <td> a </td> <td> b </td> <td> <span style= "cursor:hand; " onclick= "addRow() "> ++ </span> <span style= "cursor:hand; " onclick= "delRow() "> -- </span> </td> </tr>
</table>
</body>

</html>

100分送上关于增加行、删除行有关问

热点推荐