<html>
<title>动态行增加,删除</title>
<script language="javascript">
function onInsertrow(){
var SC = "font-size: 9pt;padding-center: 10pt;background-color: #FAFAFA"; var length=tablefield.rows.length;
var index=length-1; var objRow;
var objCel;
objRow = tablefield.insertRow();
objRow.runtimeStyle.cssText=SC;
objRow.id="row"+index;
var objCel = objRow.insertCell(0);
objCel.innerHTML="<input name='inputarea["+index+"]' type='text' value='' size='10' ></td>"; var str = hiddenarea.rows[0].cells[0].innerHTML;
objCel = objRow.insertCell(1);
var replaceStr = "["+ index + "]";
objCel.innerHTML= str.replace("[0]", replaceStr);

var objCel = objRow.insertCell(2);
objCel.innerHTML="<td><input name='delbutton' type='button' value='删除' onclick='delRow("+index+")'></td></tr></div></td></tr>";
}function delRow(id){
//alert("这个是第"+id+"行");
var strid = "row"+id;
//alert("拼接id="+ strid);
var idobj = document.getElementById(strid);
idobj.removeNode(true);
//------------------------------>这里就开始出错了,如果是动态生成的tr就得不到id
//alert("对象id="+idobj.id); }
</script>
<body>
<table width="100%" border="1" cellspacing="0" cellpadding="0" id="tablefield">
<tr class="fieldName"> 
<td>输入框</td>
            <td>下拉框</td>
<td>&nbsp;</td>
        </tr>        <tr id=row0> 
             <td >
                  <input name="inputarea[0]" type='text' value="" size=10>&nbsp;
             </td> <td>
 <select name="selectarea[0]">
<option value="01" >item-1</option>
<option value="02" >item-2</option>
<option value="03" >item-3</option>
 </select>&nbsp;
            </td>            <td>
<input name="delbutton" type="button" value="删除" onclick="delRow('0')" >
</td>
</tr>
                
</table>
<table id='hiddenarea' style="display:none">
<tr>
<td>
<select name="selectarea[0]">
<option value="01" >item-1</option>
<option value="02" >item-2</option>
<option value="03" >item-3</option>
</select>&nbsp;
</td>
</tr>
</table>
<table width="100%" border="0">
<tr>
<td><div align="center"><input name="button52" type="button" class="btnLink" value="   新增   "  onClick="onInsertrow();"></div></td>
</tr>
</table></body>
<html>

解决方案 »

  1.   

    楼上的大虾,我知道删除行用removeNode()方法,但是这个只有对固定的<tr>标签才有效,如果按照我前面的动态的增加的话如何获得dobj这个对象呢?所以我在新增的地方增加了<tr>的id,但是没有用啊!
      

  2.   

    在问一个问题,为什么通过<td id="...">这个得不到id ,而通过objRow.id来设置就行了呢?
      

  3.   

    你执行一下下面的
    可以取到的
    ---------------------
    <html>
    <title>动态行增加,删除</title>
    <script language="javascript">
    function onInsertrow(){
    var SC = "font-size: 9pt;padding-center: 10pt;background-color: #FAFAFA"; var length=tablefield.rows.length;
    var index=length-1; var objRow;
    var objCel;
    objRow = tablefield.insertRow();
    objRow.runtimeStyle.cssText=SC;
    objRow.id="row"+index;//-------增加的代码
    var objCel = objRow.insertCell(0);
    objCel.innerHTML="<input name='inputarea["+index+"]' type='text' value='' size='10' ></td>"; var str = hiddenarea.rows[0].cells[0].innerHTML;
    objCel = objRow.insertCell(1);
    var replaceStr = "["+ index + "]";
    objCel.innerHTML= str.replace("[0]", replaceStr);

    var objCel = objRow.insertCell(2);
    objCel.innerHTML="<td><input name='delbutton' type='button' value='删除' onclick='delRow("+index+")'></td></tr></div></td></tr>";
    }function delRow(id){
    alert("这个是第"+id+"行");
    var strid = "row"+id;
    alert("拼接id="+ strid);
    var idobj = document.getElementById(strid);
    //idobj.removeNode(true);
    //------------------------------>这里就开始出错了,如果是动态生成的tr就得不到id
    alert("对象id="+idobj.id); }
    </script>
    <body>
    <table width="100%" border="1" cellspacing="0" cellpadding="0" id="tablefield">
    <tr class="fieldName"> 
    <td>输入框</td>
                <td>下拉框</td>
    <td>&nbsp;</td>
            </tr>        <tr id=row0> 
                 <td >
                      <input name="inputarea[0]" type='text' value="" size=10>&nbsp;
                 </td> <td>
     <select name="selectarea[0]">
    <option value="01" >item-1</option>
    <option value="02" >item-2</option>
    <option value="03" >item-3</option>
     </select>&nbsp;
                </td>            <td>
    <input name="delbutton" type="button" value="删除" onclick="delRow('0')" >
    </td>
    </tr>
                    
    </table>
    <table id='hiddenarea' style="display:none">
    <tr>
    <td>
    <select name="selectarea[0]">
    <option value="01" >item-1</option>
    <option value="02" >item-2</option>
    <option value="03" >item-3</option>
    </select>&nbsp;
    </td>
    </tr>
    </table>
    <table width="100%" border="0">
    <tr>
    <td><div align="center"><input name="button52" type="button" class="btnLink" value="   新增   "  onClick="onInsertrow();"></div></td>
    </tr>
    </table></body>
    <html>
      

  4.   

    先删除所有再添加这样可行吗?
      //更新表数据
      function RefeshTable() {   
        //删除所有行
        var oTable = document.getElementById("SelectedTable");
        for(i=oTable.rows.length-1; i>0; i--) {
          oTable.deleteRow(i);
        }
        //重新生成表格行
        for(var i = 0; i<G_ConditionCollections.length; i++) {
          var objConditionInfo = G_ConditionCollections[i];
          CreatTableRow(objConditionInfo, i);
        }
        G_currentIndex = -1;
      }
      

  5.   

    你原来的
    objCel.innerHTML里面怎么可以包含TR?
    这当然不对,objCel是td对象,不能包含TR,对TR指定id当然不对