十万火急：如何动态增加和删除表格的行

源码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE></HEAD><BODY><table width="94%" border="0" align="center" cellpadding="2" cellspacing="0"> <tr>
<td width="446" height="16"><input type="button" name="Submit" value="增加选项">
<input type="button" name="Submit2" value="减少选项"></td>
</tr>
<tr>
<td width="10%"> </td>
<td height="16" colspan="2"><input type="radio" name="radiobutton" value="radiobutton"> <strong>A.</strong> <textarea rows="3" cols="65" name="textarea"  onBlur="this.className='input';" onFocus="this.className='input2';this.select();" ></textarea></td>
</tr>
<tr>
<td width="10%"> </td>
<td height="16" colspan="2"><input type="radio" name="radiobutton" value="radiobutton"> <strong>B.</strong> <textarea rows="3" cols="65" name="textarea2"  onBlur="this.className='input';" onFocus="this.className='input2';this.select();" ></textarea></td>
</tr>
<tr>
<td width="10%"> </td>
<td height="16" colspan="2"><input type="radio" name="radiobutton" value="radiobutton"> <strong>C.</strong> <textarea rows="3" cols="65" name="textarea3"  onBlur="this.className='input';" onFocus="this.className='input2';this.select();" ></textarea></td>
</tr>
<tr>
<td width="10%"> </td>
<td height="16" colspan="2"><input type="radio" name="radiobutton" value="radiobutton"> <strong>D.</strong> <textarea rows="3" cols="65" name="textarea4"  onBlur="this.className='input';" onFocus="this.className='input2';this.select();" ></textarea></td>
</tr>
</table>
</BODY>
</HTML>

解决方案 »

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

用 insertRow() insertCell() 生成新的行与列，用 deleteRow() 删除行
<BUTTON onclick=add()>add</BUTTON><BUTTON onclick=del()>del</BUTTON><BUTTON onclick=test()>test</BUTTON>
<TABLE id=t1 border=1>
<TBODY></TBODY></TABLE>
<SCRIPT language=JavaScript>
function add(){
t1.insertRow().insertCell().innerHTML = '<input type="radio" name="tt"><input name="test'+t1.rows.length+'">';
}
function del(){
var c = document.getElementsByName('tt');
for(var i=0; i<c.length; i++)
if(c[i].checked)
t1.deleteRow(i);
}
function test(){
for(i=0;i<t1.rows.length;i++) alert(t1.rows[i].cells[0].innerHTML);
}
</SCRIPT>
按照你的需求写的
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE></HEAD><BODY>
<script language=javascript>
function addRow()
{
var objtable=document.getElementById("table1")
var objtbody=objtable.childNodes[0];
var objLastTr=objtbody.childNodes[objtbody.childNodes.length-1]
var newRow=objtable.insertRow();
var cell1=newRow.insertCell(0);
var cell2=newRow.insertCell(1);
re=/^(.+?)(\<strong\>)(\w)(\.\<\/strong\>)(.+?)$/gi
if(re.test(objLastTr.childNodes[1].innerHTML))
{
var firstStr=RegExp.$1+RegExp.$2;
var midStr=RegExp.$3;
var LastStr=RegExp.$4+RegExp.$5;

}
midStr=midStr.charCodeAt(0)+1;
var str="";
for(var i=0;i<65;i++)
{
str=str+"*";
}
str=str+"ABCDEFGHIJKLMNOPQRSTUVWXYZ"
midStr=str.charAt(midStr);
cell1.innerHTML=objLastTr.childNodes[0].innerHTML;
cell2.innerHTML=firstStr+midStr+LastStr;

}
function removeRow()
{
var objtable=document.getElementById("table1")
var rowIndex=objtable.childNodes[0].childNodes.length-1
objtable.deleteRow(rowIndex)
}
</script>
<table width="94%" border="0" align="center" cellpadding="2" cellspacing="0" id="table1"> <tr>
<td width="446" height="16"><input type="button" name="Submit" value="增加选项" onclick=addRow()>
<input type="button" name="Submit2" value="减少选项" onclick=removeRow()></td>
</tr>
<tr id="tr1">
<td width="10%"> </td>
<td height="16" colspan="2"><input type="radio" name="radiobutton" value="radiobutton"> <strong>A.</strong> <textarea rows="3" cols="65" name="textarea"  onBlur="this.className='input';" onFocus="this.className='input2';this.select();" ></textarea></td>
</tr>
<tr>
<td width="10%"> </td>
<td height="16" colspan="2"><input type="radio" name="radiobutton" value="radiobutton"> <strong>B.</strong> <textarea rows="3" cols="65" name="textarea2"  onBlur="this.className='input';" onFocus="this.className='input2';this.select();" ></textarea></td>
</tr>
<tr>
<td width="10%"> </td>
<td height="16" colspan="2"><input type="radio" name="radiobutton" value="radiobutton"> <strong>C.</strong> <textarea rows="3" cols="65" name="textarea3"  onBlur="this.className='input';" onFocus="this.className='input2';this.select();" ></textarea></td>
</tr>
<tr>
<td width="10%"> </td>
<td height="16" colspan="2"><input type="radio" name="radiobutton" value="radiobutton"> <strong>D.</strong> <textarea rows="3" cols="65" name="textarea4"  onBlur="this.className='input';" onFocus="this.className='input2';this.select();" ></textarea></td>
</tr>
</table>
</BODY>
</HTML>
放进数据的话在生成的时候给定id，数据通过函数的参数传递给函数，然后函数根据id找到表格相应的单元放进去就好了，不时有innerText和innerHTML么
刚好适合你    <table id="table1" name="table1" width="300">
        <tr style="display:none">
     <td width="100">
     <input type="button" name="testBtn4" value="button" onclick=""/>
     </td>
     <td width="100">
     <input type="text" name="text4"  id="text4"/>
     </td>
     <td width="100">
     123
     </td>
     </tr>

     <tr>
     <td width="100">
     <input type="button" name="testBtn4" value="button" onclick="toExcel_Page()"/>
     </td>
     <td width="100">
     <input type="text" name="text4"  id="text4"/>
     </td>
     <td width="100">
     123
     </td>
     </tr>
    </table>
    <input type="button" name="testAdd" id="testAdd" value="AddRow" onclick="addRow()"/>
    <input type="button" name="testAdd" id="testAdd" value="DellRow" onclick="dellRow()"/>
    <input type="button" name="testAdd2" id="testAdd2" value="GetTextValue" onclick="buttonFun()"/>
function addRow(){
var tblObj = document.getElementById("table1");
if(tblObj.rows){
alert(tblObj.rows.length);
}else{
alert('aaa');
}
//追加行
var newRow = tblObj.insertRow();
newRow.style.display = "";
var cellNum = tblObj.rows[0].cells.length;

//追加列
for (colIndex = 0; colIndex < cellNum; colIndex++) {
var newCell = newRow.insertCell();
initTblCell(newCell);
}
}
function initTblCell(cell){
var lastCell = document.getElementById("table1").rows[0].cells[cell.cellIndex];
cell.innerHTML = lastCell.innerHTML;
alert(cell.innerHTML);
if (cell.children != null && cell.children.length > 0) {
for(childIndex = 0; childIndex < cell.children.length; childIndex++) {
var child = cell.children[childIndex];
switch(child.type) {
case "text":
child.value = "";
break;
case "checkbox":
child.value = "";
child.checked = false;
break;
}
}
}
cell.className = lastCell.className;
cell.align = lastCell.align;
cell.height = lastCell.height;
}
function buttonFun(){
var obj= document.getElementsByName("text4");
for(i=1;i<obj.length;i++){
alert(obj[i].value);
}

}
function dellRow(){
var obj= document.getElementById("table1");
var objRow=obj.rows.length-1;
alert(objRow);
if(objRow != 0){
obj.deleteRow(objRow);
}

}
用insertRow,insertCell,以及objTable.rows[i].cells[j].innerText(innerHTML)="你要写进单元格内的值"