js如何实现无限增,删tr???最好不用display属性.

<SCRIPT LANGUAGE=javascript>
function delCol() {
try {
var Elm = event.srcElement;
while(Elm && Elm.tagName != "TR") {
Elm = Elm.parentElement;
}
if(Elm.parentElement.rows.length <= 1) {
alert("无法删除！");
return;
}
Elm.parentElement.deleteRow(Elm.rowIndex);
} catch(e) {
alert("Err 5001:\r\n" + e);
}
}
function addCol(id) {
try {
var oTable = document.getElementById(id);
if(oTable.tagName != "TABLE")
  alert("Err 5002");
var oList = oTable.children;
var oTBODY;
for(var i=0;i<oList.length;i++) {
if(oList[i].tagName == "TBODY") {
oTBODY = oList[i];
break;
}
}
var oTR = oTBODY.lastChild;
var newTR = oTR.cloneNode(true);
addId(newTR);
oTBODY.insertAdjacentElement("beforeEnd",newTR);
} catch(e) {
alert("Err 5002:\r\n" + e);
}
}
function addId(node) {
try {
if(!node.hasChildNodes()) {
var prefix = node.getAttribute("id").split("_")[0];
var postfix = node.getAttribute("id").split("_")[1];
postfix = parseInt(postfix) + 1;
node.setAttribute("id",prefix + "_" + postfix);
node.setAttribute("value","");
return;
}
} catch(e) {}
try {
var oList = node.childNodes;
for(var i=0;i<oList.length;i++) {
addId(oList[i]);
}
} catch(e) {
alert("Err 5003:\r\n" + e);
}
}
</SCRIPT>
<table width="100%" border="1" align="center" cellpadding="3" cellspacing="1" bordercolor="#000000" class="tableprintable" id="t1">
                <tr align="center" class="tdbg0"> 
                   <td class="tdbg0">1</td><td><button class="button" onClick="delCol()"> 
                    删除</button></td>
                </tr>
              </table>
              <button class="button" onClick="addCol('t1')">添加一行</button>
            </td>
          </tr>
        </table>

解决方案 »

  1.   

    insertRow()            //增加TR行
    trID.removeNode(true)  //删除一行TR
      

  2.   

    applyElement()  //也可以增加TR
      

  3.   

    insertRow()
    appendChild()
    insertBefore()removeNode()
    removeChild()
      

  4.   

    <TABLE id='aaa'>
    <TR id='bbb'>
    <TD></TD>
    </TR>
    </TABLE>
    <script>
    newtr = aaa.insertRow(aaa.rows.length); //在最后添加一个tr
    newtr.id='ccc'; //添加tr的属性
    newtr.onclick='alert()';bbb.removeNode(true); //删除bbb
    </script>
      

  5.   

    谢谢各位,fason(阿信)例子不错.//我也有一个类似的贴子.未完成.初步实现了增加ROW,看了好多文章,关于介绍全面DOM比较少
    ,不知哪位找到完整的DOM文档资料,所有的对象,方法和属性的应用!!!谢谢
    <!doctype html public "-//w3c//dtd html 4.0 transitional//en">
    <html>
    <head>
    <title> new document </title>
    <script>
    function doRoomAdd(){ //tableObj = document.createElement("TABLE");
    //tbodyObj = document.createElement("TBODY");
    tr1Obj = document.createElement("TR"); tr1td1Obj = document.createElement("TD");
    tr1td2Obj = tr1td1Obj.cloneNode(false);
    tr1td3Obj = tr1td1Obj.cloneNode(false);
    tr1td4Obj = tr1td1Obj.cloneNode(false);
    tr1td5Obj = tr1td1Obj.cloneNode(false); row1cell1Obj = document.createTextNode("row1,cell1");
    row1cell2Obj = row1cell1Obj.cloneNode(false);
    row1cell3Obj = row1cell1Obj.cloneNode(false);
    row1cell4Obj = row1cell1Obj.cloneNode(false);
    row1cell5Obj = row1cell1Obj.cloneNode(false); //row1cell2Obj.nodeValue = "This is row 1, cell 2";

    row1cell2Obj.nodeValue = document.forms[0].elements["delRoomBtn"];
    //row1cell2Obj.nodeType=1;
    row1cell3Obj.nodeValue = "This is row 1, cell 3";
    row1cell4Obj.nodeValue = "This is row 1, cell 4";
    row1cell5Obj.nodeValue = "This is row 1, cell 5"; //returnValue = tableObj.insertBefore(tbodyObj);
    //tbodyObj.insertBefore(tr1Obj);
    tr1Obj.insertBefore(tr1td5Obj);
    tr1Obj.insertBefore(tr1td4Obj,tr1td5Obj);
    tr1Obj.insertBefore(tr1td3Obj,tr1td4Obj);
    tr1Obj.insertBefore(tr1td2Obj,tr1td3Obj);
    tr1Obj.insertBefore(tr1td1Obj,tr1td2Obj);
    tr1td5Obj.insertBefore(row1cell5Obj);
    tr1td4Obj.insertBefore(row1cell4Obj);
    tr1td3Obj.insertBefore(row1cell3Obj);
    tr1td2Obj.insertBefore(row1cell2Obj);
    tr1td1Obj.insertBefore(row1cell1Obj); bodyNode.insertBefore(tr1Obj);

    //document.all["roomTable"].firstChild.childNodes[0].childNodes[1].firstChild.innerHTML="<a href=''>dd</a>";

    }</script>
    </head><body>
       <input type="button" name="addRoomBtn" value="**增加输入框**" onClick="javascript:doRoomAdd();"><br><br>
                <table width="75%" border="0" align="center" cellpadding="3" cellspacing="1" bgcolor="#CCCCCC" id=roomTable>
                 <form name=roomForm method=post action=doAddRoom.asp>             <tr bgcolor="#FFFFFF" ID="bodyNode"> 
                  <td> 
                   <input type="text" name="roomType">
                  </td>
                  <td align="center"> 
                   <input type="text" name="roomNPrice">
                  </td>
                  <td align="center"> 
                   <input type="text" name="roomUPrice">
                  </td>
                  <td align="center"> 
                   <input type="text" name="roomComm">
                  </td>
                  <td align="center"> 
                   <input type="button" name="delRoomBtn" value="删除" onClick="javascript:doRoomDel('Tr1');">
                  </td>
                 </tr>  </form>
                </table>
    </body>
    </html>
      

  6.   

    哪位找到完整的DOM文档资料,所有的对象,方法和属性的应用!!!谢谢