用JavaScript给表格动态添加行

我想做一个功能，就是给表格动态添加行，下面是我的代码，但是目前只能实现添加和删除，不能修改，我想实现修改这个功能，哪位高手能帮我一下？下面这是全部的代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style>
body{font-family:Verdana, Geneva, sans-serif; font-size:12px; margin:0px; padding:0px;}
table{font-size:12px; font-family:Verdana, Geneva, sans-serif}
td{text-align:center; background:#FFF}
tr{height:20px;}
th{background:#9DACBF; color:#FFF; height:20px; line-height:20px}
a{color:#99C;}
a:hover{color:#F93}
.input td{padding:2px}
.input input{width:100%; border:1px solid #000; overflow:hidden}
.btn{}
</style>
<script src="jquery-1.2.6.min.js" type="text/javascript"></script>
<script type="text/javascript">
//简化document.getElementById()方法
function getObj(obj){
  return document.getElementById(obj);
}
function insRow(){
  //插入行
  var obj=getObj("nw");
  var newRow=obj.insertRow(obj.rows.length);  //插入行方法
  var newCell1=newRow.insertCell(newRow.cells.length);  //插入单元格如果直接用insertCell()在FF里会出错，所以为了兼容，我们要加上newRow.cells.length参数
  var newCell2=newRow.insertCell(newRow.cells.length);
  var newCell3=newRow.insertCell(newRow.cells.length);
  newCell1.innerHTML=getObj("name").value;  //插入单元格后，现在向单元格中添加内容
  newCell2.innerHTML=getObj("add").value;

  //清空文本框
  document.all("name").value="";
  document.all("add").value="";

  //将当前表格最后一行的序号写在delRow()方法中，这样我们可以在delRow()方法中删除当前行
  newCell3.innerHTML='<a href="javascript:delRow('+(obj.rows.length-1)+')">删除</a>';
}
//删除行
function delRow(i){
  var obj=getObj("nw");
  obj.deleteRow(i);
}</script>
<title>Javascript控制表格实现动态添加和删除表格内容</title>
</head><body>
<table id="nw" cellpadding="0" cellspacing="1" border="0" width="320" bgcolor="#CCCC99">
<th>编号</th>
      <th>名称</th>
      <th>操作</th>
  <tr class="input">
    <td><input type="text" id="name" /></td>
    <td><input type="text" id="add" /></td>
    <td style="width:52px"><input type="button" value="添加" class="btn" onClick="insRow()" /></td>
  </tr>

</table>
</body>
</html>

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

参考一下js动态修改table中td的值
http://www.cnblogs.com/RitchieChen/archive/2008/08/05/1261079.html
http://fly533.javaeye.com/blog/611527
楼主先学习:
cloneNode(true)//拷贝节点
appendChild（节点）//附加到最后节点
insertAdjacentElement、 insertAdjacentHTML、insertBefore
等就Ok了其实不难的
试试看IE 8 和 FF 3.6.8 测试通过L@_@K
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style>
body{font-family:Verdana, Geneva, sans-serif; font-size:12px; margin:0px; padding:0px;}
table{font-size:12px; font-family:Verdana, Geneva, sans-serif}
td{text-align:center; background:#FFF}
tr{height:20px;}
th{background:#9DACBF; color:#FFF; height:20px; line-height:20px}
a{color:#99C;}
a:hover{color:#F93}
.input td{padding:2px}
.input input{width:100%; border:1px solid #000; overflow:hidden}
.btn{}
</style>
<script src="jquery-1.2.6.min.js" type="text/javascript"></script>
<script type="text/javascript">
//简化document.getElementById()方法
function getObj(obj){
  return document.getElementById(obj);
}
//插入行
function insRow(){
    var targetTable = getObj("nw");
    var lastRow = getTBody(targetTable).appendChild(targetTable.rows[1].cloneNode(true)); //插入行方法
    clearTextBox(lastRow);    var newCell3 = lastRow.cells[2];
    newCell3.innerHTML = '<a href="#">删除</a>';
    newCell3.onclick = delRow;
}
//删除行
function delRow(){
    var targetTable = getObj("nw");
    targetTable.deleteRow(this.parentNode.rowIndex);
}
function getTBody(table) {
    for (var i=0; i<table.childNodes.length; i++)
    {
        if (table.childNodes[i].nodeType == 1
            && table.childNodes[i].tagName.toLowerCase()=="tbody")
            return table.childNodes[i];
    }
}
function clearTextBox(target) {
    var allInputs = target.getElementsByTagName("input");
    var ipt;
    for (var i=0; i<allInputs.length; i++)
    {
        ipt = allInputs[i];
        if (ipt.type.toLowerCase()=="text")
        {
            ipt.value = "";
        }
    }
}</script>
<title>Javascript控制表格实现动态添加和删除表格内容</title>
</head><body>
<table id="nw" cellpadding="0" cellspacing="1" border="0" width="320" bgcolor="#CCCC99">
<th>编号</th>
  <th>名称</th>
  <th>操作</th>
  <tr class="input">
  <td><input type="text" id="name" /></td>
  <td><input type="text" id="add" /></td>
  <td style="width:52px"><input type="button" value="添加" class="btn" onClick="insRow()" /></td>
  </tr></table>
</body>
</html>
可以考虑用jquery
js主要用到createElement/setAttribute/appendChild            var _parent = document.getElementById("path_table").firstChild;
            var row = document.createElement("tr");
            row.setAttribute("id",len);
            var cell1 = document.createElement("td");
            cell1.style.borderBottom = "solid";
            cell1.style.borderBottomWidth = "1px";
            var cell2 = document.createElement("td");
            cell2.style.borderBottom = "solid";
            cell2.style.borderBottomWidth = "1px";
            var _a = document.createElement("a");
            _a.innerHTML = "取消";
            _a.href = "javascript:remove("+len+")";
            var _text = document.createTextNode(_path);
            cell1.appendChild(_text);
            cell2.appendChild(_a);
            row.appendChild(cell1);
            row.appendChild(cell2);
            _parent.appendChild(row);
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>Untitled Document</title>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function(){
$("input[value='修改']").bind('click',function(){
var buttonObj = $(this);
var parentObj = $(this).parent().parent();
$.each(parentObj.find('td'),function(index){
var tdObj;
if(index != 3){
tdObj = $(this);
var v = $(this).text();
$(this).html("<input type=\"text\" name=\"\" value=\""+v+"\" />");
}
});
buttonObj.toggle();
buttonObj.next('input[type=button]').toggle();
}); $("input[value='保存']").click(function(){
var buttonObj = $(this);
var parentObj = $(this).parent().parent();
$.each(parentObj.find('td>input[type=text]'),function(){
tdObj = $(this).parent();
var v = $(this).val();
tdObj.html(v);
});
buttonObj.toggle();
buttonObj.prev('input[type=button]').toggle();
});

$("input[value='删除']").click(function(){
var parentObj = this.parentNode.parentNode.parentNode;
parentObj.removeChild(this.parentNode.parentNode);
});
var tableObj = $('#_mytable');
var trObj1 = "<tr><td>3222</td><td>3222</td><td>3222</td><td>";
var trObj2 = "<input type=\"button\" name=\"\" value=\"删除\" onclick=\"toDelete(this);\">";
var trObj3 = " <input type=\"button\" name=\"\" value=\"修改\" onclick=\"toUpdate($(this));\">";
var trObj4 = " <input type=\"button\" name=\"\" value=\"保存\" onclick=\"toSave($(this));\" style=\"display:none\">";
var trObj5 = "</td>";
$("input[value='增加']").click(function(){
tableObj.append(trObj1+trObj2+trObj3+trObj4+trObj5);
});

});
//删除
function toDelete(t){
var parentObj = t.parentNode.parentNode.parentNode;
parentObj.removeChild(t.parentNode.parentNode);
}
//修改
function toUpdate(t){
var parentObj = t.parent().parent();
$.each(parentObj.find('td'),function(index){
var tdObj;
if(index != 3){
tdObj = $(this);
var v = $(this).text();
$(this).html("<input type=\"text\" name=\"\" value=\""+v+"\" />");
}
});
t.toggle();
t.next('input[type=button]').toggle();
}
//保存
function toSave(t){
var parentObj = t.parent().parent();
$.each(parentObj.find('td>input[type=text]'),function(){
tdObj = $(this).parent();
var v = $(this).val();
tdObj.html(v);
});
t.toggle();
t.prev('input[type=button]').toggle();
}

</script>
</head>
<body>
<input type="button" name="" value="增加"><br/>
<table id="_mytable" border="1" width="100%">
<tr>
<td>11</td>
<td>22</td>
<td>33</td>
<td>
<input type="button" name="" value="删除">
<input type="button" name="" value="修改">
<input type="button" name="" value="保存" style="display:none">
</td>
</tr>
<tr>
<td>44</td>
<td>55</td>
<td>66</td>
<td>
<input type="button" name="" value="删除">
<input type="button" name="" value="修改">
<input type="button" name="" value="保存" style="display:none">
</td>
</tr>
<tr>
<td>77</td>
<td>88</td>
<td>99</td>
<td>
<input type="button" name="" value="删除">
<input type="button" name="" value="修改">
<input type="button" name="" value="保存" style="display:none">
</td>
</tr>
<tr>
<td>00</td>
<td>12</td>
<td>13</td>
<td>
<input type="button" name="" value="删除">
<input type="button" name="" value="修改">
<input type="button" name="" value="保存" style="display:none">
</td>
</tr>
</table>
</body>
</html>
忘了说明了，快下班时写的，修改的时候的样式没有控制。LZ可以用css控制一下输入框的样式，宽度填满td的宽度，去掉边框之类的，用样式控制的显示效果看着与td原先没有变化。总之，大体的思路就是这样的。用输入框替代原先的，录入内容后恢复原样。