怎么样才能动态在TABLE中的一定位置增加或删除行或列

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>test</title>
<script>
var k=1
function doAdd()
{
k=k+1;
var nowTable=document.all.myTable;
var newTr=nowTable.insertRow(k);
var newTd=newTr.insertCell(0);
var newTd1=newTr.insertCell(1);
var newTd2=newTr.insertCell(2);
var newTd3=newTr.insertCell(3);
var newTd4=newTr.insertCell(4);
var newTd5=newTr.insertCell(5);newTd.innerHTML="<input name='object0' type='text' class='text1' id='object'>";
newTd1.innerHTML="<input name='object1' type='text' class='text4' id='object1' onKeypress='return(!event.shiftKey&&event.keyCode>47 && event.keyCode<58 )'>";
newTd2.innerHTML="<input name='object2"+k+"' value='object2"+k+"' type='text' class='text2' id='object2"+k+"' onKeypress='return(!event.shiftKey&&event.keyCode>45 && event.keyCode<58 )' onclick='alert(this.value)'>";
newTd3.innerHTML="<input name='object3"+k+"' value='object2"+k+"' type='text' class='text2' id='object3"+k+"' onKeypress='return(!event.shiftKey&&event.keyCode>47 && event.keyCode<58 )'>";
newTd4.innerHTML="<input name='object4' type='text' class='text3' id='object4' value='册' readonly=''> ";
newTd5.innerHTML="<input name='object5' type='text' class='text1' id='object5'>";
}
function doDel()
{
if(k>=2)
{
document.all.myTable.rows(k).removeNode();
document.getElementById("object2"+k).value="";
document.getElementById("object3"+k).value="";
k=k-1;
}
else
{
alert("不能继续删减条目!");
}
}
</script>
<style type="text/css">

</style>
</head>
<body>
<button  id="manu3" onClick="doAdd();"><img src="images/icon/base/MISC05.ICO" width="15" height="15" align="absmiddle"> 增行</button>
<button  id="manu4" onclick="doDel();"><img src="images/icon/base/MISC06.ICO" width="15" height="15" align="absmiddle"> 删行</button>
<form name="form1">
<table width="658" border="1" cellpadding="0"  cellspacing="1" bordercolor="#A0A0A0" id="myTable">
  <tr align="center" valign="middle">
    <td width="147" height="18">aaaaaaaa</td>
    <td width="130" height="18">bbbbbbbb</td>
    <td width="85" height="18">cccccccc</td>
    <td width="85" height="18">ddddddd</td>
    <td width="30" height="18">eeeeeee</td>
    <td height="18">ff</td>
  </tr>
  <tr align="left" valign="middle"  id="myTr1">
    <td height="18"><input name="object0" type="text" class="text1" id="object0"  ></td>
    <td height="18"><input name="object1" type="text" class="text4" id="object1"   onKeypress="return(!event.shiftKey&&event.keyCode>47 && event.keyCode<58 )"></td>
    <td height="18"><input name="object21" type="text" class="text2" id="object21"  onKeypress="return(!event.shiftKey&&event.keyCode>45 && event.keyCode<58)" ></td>
    <td height="18"><input name="object31" type="text" class="text2" id="object31"   onKeypress="return(!event.shiftKey&&event.keyCode>47 && event.keyCode<58 )"></td>
    <td width="30" height="18"><input name="object4" type="text" class="text3" id="object4"  value="" readonly=""></td>
    <td height="18"><input name="object5" type="text" class="text1" id="object5"  ></td>
  </tr>
</table>
</form>
</body>
</html>

解决方案 »

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

<style>
td{background-color:red}
</style>
<body>
<table>
<tr><td>1111</td><td>1111</td><td>1111</td><td>1111</td><td>1111</td></tr>
<tr><td>2222</td><td>2222</td><td>2222</td><td>2222</td><td>2222</td></tr>
<tr><td>3333</td><td>3333</td><td>3333</td><td>3333</td><td>3333</td></tr>
<tr><td>4444</td><td>4444</td><td>4444</td><td>4444</td><td>4444</td></tr>
<tr><td>5555</td><td>5555</td><td>5555</td><td>5555</td><td>5555</td></tr>
</table>
<input type=button value='第一行前添加行' onclick='addRow()'>
<input type=button value='第二列后添加列' onclick='addColumn()'>
<input type=button value='删除第四行' onclick='delRow()'>
<input type=button value='删除第三列' onclick='delColumn()'>
</body>
<script>
var tb=document.getElementsByTagName('table')[0];function addRow()
{
  var newRow=document.createElement('tr');
  for(var i=0;i<tb.rows[0].cells.length;i++)
   {
      var td=document.createElement('td');
      td.innerText='new row';
      newRow.appendChild(td);
   }
  tb.childNodes[0].insertBefore(newRow,tb.rows[0]);
}
function addColumn()
{  for(var i=0;i<tb.rows.length;i++)
   {
      var newCol=document.createElement('td');
      newCol.innerText='new column';
      tb.rows[i].insertBefore(newCol,tb.rows[i].cells[2]);
   }
}
function delRow()
{
  tb.rows[3].removeNode(true);
}
function delColumn()
{
    for(var i=0;i<tb.rows.length;i++)
   {
      tb.rows[i].cells[2].removeNode(true);
   }
}
</script>
楼上两位,删除行和列的时候,应该考虑一下rowspan和colspan的问题呀?
呵呵.比如这样的表格:
<table border=1 onClick="this.rows[1].removeNode(1)">
<tr>
<td rowspan=2> </td>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr></table>