用Javascript动态增加一个表格行

<body>
<TABLE border="1" id="activeTable">
</TABLE>
<button onclick="AddRecord()">Add Record</a>
<script>
function AddRecord()
{
var row = activeTable.insertRow(activeTable.rows.length);//id=recordTable 
var col = row.insertCell(0);
var i = row.rowIndex;
col.innerHTML = "<input type='text' name='texRe"+ i + "' value='' >"; 
col = row.insertCell(1); 
col.innerHTML = "<input type='checkbox' name='texObject"+ i +"' value='' >"; 
col = row.insertCell(2); 
col.innerHTML = "<input type='button' name='texClassOne"+  i +"' value='aaa' >"; 
}
</script>
</body>

解决方案 »

  1.   

    <html>
    <head>
    <title>Table对象的方法</title>
    <script language="JavaScript">
    var intRowIndex = 0;
    function insertRow(tbIndex){
       var objRow = myTable.insertRow(tbIndex);
       var objCel = objRow.insertCell(0);
       objCel.innerText = document.myForm.myCell1.value;
       var objCel = objRow.insertCell(1);
       objCel.innerText = document.myForm.myCell2.value;
       objRow.attachEvent("onclick", getIndex);
       objRow.style.background = "pink";
    }
    function deleteRow(tbIndex){
       myTable.deleteRow(tbIndex);
    }
    function getIndex(){
       intRowIndex = event.srcElement.parentElement.rowIndex;
       pos.innerText = intRowIndex;
    }
    </script>
    </head>
    <body onload="pos.innerText=intRowIndex;">
    <h2>Table对象的方法</h2>
    <hr>
    当前位置 : <span id="pos"></span>
    <table id="myTable" border=1>
    <tr onclick="getIndex()">
       <td>HTML</td>
       <td>CSS</td>
    </tr>
    <tr onclick="getIndex()">
       <td>JavaScript</td>
       <td>VBScript</td>
    </tr>
    </table>
    <form name="myForm">
    第一栏 : <input type="text" name="myCell1" value="CGI"><br>
    第二栏 : <input type="text" name="myCell2" value="ASP"><br>
    <input type="button" onclick="insertRow(intRowIndex)" value="插入行">
    <input type="button" onclick="deleteRow(intRowIndex)" value="删除行">
    <input type="button" onclick="insertRow(myTable.rows.length);" value="添加行">
    </form>
    </body>
    </html>
      

  2.   

    <html>
    <head>
    <title>Table对象的方法</title>
    <script language="JavaScript">
    var intRowIndex = 0;
    function insertRow(tbIndex){
       var objRow = myTable.insertRow(tbIndex);
       var objCel = objRow.insertCell(0);
       objCel.innerHTML = document.myForm.myCell1.value;
       var objCel = objRow.insertCell(1);
       objCel.innerHTML= document.myForm.myCell2.value;
       objRow.attachEvent("onclick", getIndex);
       objRow.style.background = "pink";
    }
    function deleteRow(tbIndex){
       myTable.deleteRow(tbIndex);
    }
    function getIndex(){
       intRowIndex = event.srcElement.parentElement.rowIndex;
       pos.innerText = intRowIndex;
    }
    </script>
    </head>
    <body onload="pos.innerText=intRowIndex;">
    <h2>Table对象的方法</h2>
    <hr>
    当前位置 : <span id="pos"></span>
    <table id="myTable" border=1>
    <tr onclick="getIndex()">
       <td>HTML</td>
       <td>CSS</td>
    </tr>
    <tr onclick="getIndex()">
       <td>JavaScript</td>
       <td>VBScript</td>
    </tr>
    </table>
    <form name="myForm">
    第一栏 : <input type="text" name="myCell1" value="CGI<input type=text>"><br>
    第二栏 : <input type="text" name="myCell2" value="ASP"><br>
    <input type="button" onclick="insertRow(intRowIndex)" value="插入行">
    <input type="button" onclick="deleteRow(intRowIndex)" value="删除行">
    <input type="button" onclick="insertRow(myTable.rows.length);" value="添加行">
    </form>
    </body>
    </html>
      

  3.   

    <html>
    <body>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    function showinput()
    {
    elm = event.srcElement;
    if (elm.tagName != "TD") return;
    elm.innerHTML = "<input onblur='hide()'  value='"+elm.innerText+"' size=10 id='input1'></input>";
    input1.focus();
    input1.select();
    }
    function hide()
    {
    elm = event.srcElement;
    elm.parentNode.innerHTML = elm.value
    }
    function deleteLine()
    {
    for (var i=tbody1.children.length-1; i>=0 ; i-- )
    if (tbody1.children[i].firstChild.firstChild.checked)
    tbody1.deleteRow(i);
    }
    function addLine()
    {
    elm = thead1.lastChild.cloneNode(true)
    elm.style.display="";
    tbody1.insertBefore(elm);
    }
    //-->
    </SCRIPT>
    <TABLE border=1 height=100>
    <thead id=thead1>
    <tr>
    <th></th>
    <th width=100></th>
    <th width=100></th>
    <th width=100></th>
    </tr>
    <TR style="display:none">
    <td><input type=checkbox id=checkLine></td>
    <TD>000</TD>
    <TD>000</TD>
    <TD>000</TD>
    </TR>
    </thead>
    <tbody onClick="showinput()" id=tbody1>
    <TR>
    <td><input type=checkbox id=checkLine></td>
    <TD>aaa</TD>
    <TD>bbb</TD>
    <TD>ccc</TD>
    </TR>
    <TR>
    <td><input type=checkbox id=checkLine></td>
    <TD>ddd</TD>
    <TD>eee</TD>
    <TD>fff</TD>
    </TR>
    <TR>
    <td><input type=checkbox id=checkLine></td>
    <TD>ggg</TD>
    <TD>hhh</TD>
    <TD>iii</TD>
    </TR>
    </tbody>
    <tfoot>
    <tr>
    <td colspan=4 align=center>
    <button onClick="deleteLine()">del</button>
    <button onClick="addLine()">add</button>
    </td>
    </tr>
    </tfoot>
    </TABLE></body></html>