如何使用JS动态的加入或删除Text输入框和表格的行？

Question

<table id="demo">
<tr>
<td><input><input type="button" value="delete" onclick="delRow(this)"></td>
</tr>
</table>
<input type=button value="add" onclick="addRow()">
<script language="JavaScript">
<!--
function addRow(){
var tb=document.getElementById("demo").firstChild
if(tb.firstChild)tb.appendChild(tb.lastChild.cloneNode(true))
}
function delRow(o){
var tb=document.getElementById("demo").firstChild
tb.removeChild(o.parentNode.parentNode)
}
//-->
</script>

Answer 1

function deleteRowpc(objTable){
    var tbodyOnlineEdit=objTable.getElementsByTagName("TBODY")[0];
    for (var i=tbodyOnlineEdit.children.length-4; i>=0 ; i=i-4 )
      if (tbodyOnlineEdit.children[i].firstChild.firstChild.checked==true)
      {
      formP.txtVI11[i/4+1].value="";
  formP.txtVI11Name[i/4+1].value="";
      formP.txtVI09[i/4+1].value="";
      formP.txtVH14B[i/4+1].value="";
      formP.txtVH511B[i/4+1].value="";
      formP.txtVH512B[i/4+1].value="";
  formP.txtVH51BName[i/4+1].value="";
  formP.txtVH52BName[i/4+1].value="";   
      formP.txtVH611B[i/4+1].value="";
      formP.txtVH612B[i/4+1].value="";
  formP.txtVH61BName[i/4+1].value="";
  formP.txtVH62BName[i/4+1].value="";   
      tbodyOnlineEdit.deleteRow(i);
      tbodyOnlineEdit.deleteRow(i);
      tbodyOnlineEdit.deleteRow(i);
      tbodyOnlineEdit.deleteRow(i);
    }
    var tbodyOnlineEdit=tableOnlineEdit.getElementsByTagName("TBODY")[0];
    for (var i=tbodyOnlineEdit.children.length-4; i>=0 ; i=i-4 ){
  formP.rowcol[i/4+1].value=i/4+1;
      tbodyOnlineEdit.children[i].children[3].innerHTML="<a  href=javascript:openshohin('"+(i/4+1)+"')>専嶕</a> ";
      tbodyOnlineEdit.children[i+2].children[3].innerHTML="<a  href=javascript:opennounyu('"+(i/4+1)+"')>擺擖愭専嶕</a> ";
      if (formP.txtVH07.value!="1")
  {
  tbodyOnlineEdit.children[i+2].children[5].innerHTML="<a  href=javascript:opensecchi('"+(i/4+1)+"')>愝抲愭専嶕</a> ";
      } 
    }
  }
  function addRowpc(objTable,rows){
  var str1="<input name='txtVH611B' type=hidden id='txtVH611B' size=15 maxlength=9>";
  str1=str1+"<input  name='txtVH612B' type=hidden id='txtVH612B'  size=10 maxlength=6>";
   var str2="<input name='txtVH61BName' type=hidden id='txtVH61BName' size=40 style='border-style: none;BACKGROUND-COLOR:#FFCCCC;color:#000000' readonly=true>";
  str2=str2+"<br>";
  str2=str2+"<input  name='txtVH62BName' type=hidden id='txtVH62BName'  size=40 style='border-style: none;BACKGROUND-COLOR:#FFCCCC;color:#000000'readonly=true>";      var rownum=parseInt(rows,10);
    var tbodyOnlineEdit=objTable.getElementsByTagName("TBODY")[0];
    var row=tbodyOnlineEdit.children.length;
    row=row/4;
    if (row+rownum>100)
    {
      alert("柧嵶偺嵟戝峴悢侾侽侽丅");
      return false;
    }
    for (var j=0;j<rownum;j++){
      var tbodyOnlineEdit=objTable.getElementsByTagName("TBODY")[0];
      var theadOnlineEdit=objTable.getElementsByTagName("THEAD")[0];
      var elm1 = theadOnlineEdit.children[0].cloneNode(true);
      var elm2 = theadOnlineEdit.children[1].cloneNode(true);
      var elm3 = theadOnlineEdit.children[2].cloneNode(true);
      var elm4 = theadOnlineEdit.children[3].cloneNode(true);
      var row=tbodyOnlineEdit.children.length;
      row=row/4;
      if (row!=0){
        row=parseInt(formP.rowcol[row].value,10)+1;
      }
      else
      {
        row=row+1;
      }
      elm1.style.display="";
      elm2.style.display="";
      elm3.style.display="";
      elm4.style.display="";
      setInputValue(elm1,"rowcol",row);
      elm1.children[3].innerHTML="<a  href=javascript:openshohin('"+row+"')>専嶕</a> ";
      elm3.children[3].innerHTML="<a  href=javascript:opennounyu('"+row+"')>擺擖愭専嶕</a> ";
      if (formP.txtVH07.value!="1")
  {
      elm3.children[5].innerHTML="<a  href=javascript:opensecchi('"+row+"')>愝抲愭専嶕</a> ";
      }
  else
  {
  elm3.children[4].innerHTML=str1;
  elm4.children[3].innerHTML=str2;
  }
      tbodyOnlineEdit.insertBefore(elm1);
      tbodyOnlineEdit.insertBefore(elm2);
      tbodyOnlineEdit.insertBefore(elm3);
      tbodyOnlineEdit.insertBefore(elm4);
    }
  }
  function setInputValue(objRow,strName,strValue){
    var objs=objRow.all;
    for(var i=0;i<objs.length;i++){
      if(objs[i].name==strName)objs[i].value=strValue;
    }
  }
---------------------------------------------------------------------------------
 <table cellspacing=0 width=620 border=0 cellborder="0" background="#cfe4ff"  id=tableOnlineEdit rules=rows>
      <thead>
 <TR bgcolor=#FFCCCC style="display:none">
   <TD width="20"  valign="top"> <input name="checkbox" type="checkbox"  id=checkLine >
   </TD>
   <TD width=10 valign="top"> <input type="text" name="rowcol"  id="rowcol" readonly="true" size="2" style="border-style: none;BACKGROUND-COLOR:#FFCCCC;color:#000000">
   </TD>
   <TD width="157" height="20" valign="middle"> <input   name=txtVI11 type="text" id="txtVI11"   size=21 maxlength=20>
   </TD>
   <TD width="45" valign="middle" nowrap>&nbsp;</TD>
   <TD width="77" height="20" valign="middle"> <input    name=txtVI09 type="text" id="txtVI09"  size=13 maxlength=12>
   </TD>
   <TD width="127" height="20" valign="middle"> <input    name=txtVH14B type="text" id="txtVH14B"     size=9 maxlength=8>
   </TD>
          <TD width="49" height="20" valign="middle">&nbsp; </TD>       <TD width="38" height="20" valign="middle">&nbsp; </TD>
          <TD width="79" height="20" valign="middle">&nbsp; </TD>
 </TR>
 <TR bgcolor=#FFCCCC style="display:none">
   <TD width="20" height="20" valign="top">&nbsp;</TD>
   <TD width=10 valign="top">&nbsp;</TD>
   <TD height="20" colspan="7" valign="middle"><input name="txtVI11Name" type="text"  id="txtVI11Name" style="border-style: none;BACKGROUND-COLOR:#FFCCCC;color:#000000" size="40" readonly="true"></TD>
 </TR>
 <TR bgcolor=#FFCCCC style="display:none">
   <TD width="20" height="20" valign="top">&nbsp;</TD>
   <TD valign="top" width="10">&nbsp;</TD>
   <TD colspan="2" valign="middle" nowrap> <input   name=txtVH511B type="text" id="txtVH511B"  size=10 maxlength=9>亅<input  name=txtVH512B type="text" id="txtVH512B"  size=7 maxlength=6>
   </TD>
   <TD valign="middle" nowrap>&nbsp;</TD>
   <TD colspan="2" align="left" valign="middle"> <input name=txtVH611B type="text" id="txtVH611B" size=10 maxlength=9>亅<input  name=txtVH612B type="text" id="txtVH612B"  size=7 maxlength=6>
   </TD>
   <TD colspan="2" align="center" valign="middle">&nbsp;</TD>
 </TR>
 <TR bgcolor=#FFCCCC style="display:none">
   <TD width="20" height="20" valign="top"><font size="2">&nbsp;</font></TD>
   <TD valign="top" width="10"><font size="2">&nbsp;</font></TD>
          <TD valign="middle" colspan="3"><font size="2"> 
            <input name="txtVH51BName" type="text"  id="txtVH51BName" style="border-style: none;BACKGROUND-COLOR:#FFCCCC;color:#000000" size="40" readonly="true">
            <input  type="hidden" id="VI51" name="VI51">
            <input  type="hidden" id="VI52" name="VI52">
            <input name="txtVH52BName" type="text"  id="txtVH52BName" style="border-style: none;BACKGROUND-COLOR:#FFCCCC;color:#000000" size="40" readonly="true">
            <input  type="hidden" id="VI53" name="VI53">
            <input  type="hidden" id="VI54" name="VI54">
            </font></TD>
          <TD valign="middle" colspan="4"><font size="2"> 
            <input name="txtVH61BName" type="text"  id="txtVH61BName" style="border-style: none;BACKGROUND-COLOR:#FFCCCC;color:#000000" size="40" readonly="true">
            <input name="txtVH62BName" type="text"  id="txtVH62BName" style="border-style: none;BACKGROUND-COLOR:#FFCCCC;color:#000000" size="40" readonly="true">
            </font></TD>
 </TR>
      </thead>
      <tbody>
      </tbody>
    </table>
---------------------------------------------------------------------------------
删除选中行
onClick="resetFormonClick="deleteRowpc(tableOnlineEdit)
添加行
onClick="addRowpc(tableOnlineEdit,formP.rownum.value)

Answer 2

要学会看msdn，里面说的最详细了。
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/dhtml_reference_entry.asp

Answer 3

http://msdn.microsoft.com/workshop/author/dhtml/reference/objects/table.asp

Answer 4

to:fason(阿信)
   试了试你的东西，不错，可是如果我删除所有的文本框，就不能再增加了；而且我想能不能只用一个delete按钮。请教一下！

Answer 5

<table id="demo">
<tr>
<td><input><input type="checkbox"  name="a" disabled></td>
</tr>
<tr>
<td><input><input type="checkbox"  name="a"></td>
</tr>
</table>
<input type=button value="add" onclick="addRow()">
<input type=button value="del" onclick="delRow()">
<script language="JavaScript">
<!--
function addRow(){
var tb=document.getElementById("demo").firstChild
if(tb.firstChild)tb.appendChild(tb.lastChild.cloneNode(true))
}
function delRow(){
var tb=document.getElementById("demo").firstChild
var c=document.getElementsByName("a")
for(i=c.length-1;i>=0;i--)if(c[i].checked)tb.removeChild(c[i].parentNode.parentNode)
}
//-->
</script>

Answer 6

to:fason(阿信)
   感谢！
   但是能不能不用checkbox，删除的时候就每次删除最后一个呢？（弱弱的问，呵呵）

Answer 7

<table id="demo">
<tr>
<td><input></td>
</tr>
</table>
<input type=button value="add" onclick="addRow()">
<input type=button value="del" onclick="delRow()">
<script language="JavaScript">
<!--
function addRow(){
var tb=document.getElementById("demo").firstChild
if(tb.firstChild)tb.appendChild(tb.lastChild.cloneNode(true))
}
function delRow(){
var tb=document.getElementById("demo").firstChild
if(tb.childNodes.length>1)tb.removeChild(tb.lastChild)
}
//-->
</script>

Answer 8

to:fason(阿信)
   还想问一个问题：如何取动态添加的文本框的值呢？
   非常抱歉，问这些书本上可能有的东西。但确实遇到高手不多问问很失败！
   thanks！

Answer 9

JS访问?
var txt=document.getElementsByName("txtName")
for(i=0;i<txt.length;i++)alert(txt[i].value)

Answer 10

阿信，果然厉害，因为我在你上面的代码中为输入框加上了名字，可是我用
var txt=document.text1;
for(i=0;i<txt.length;i++)alert(txt[i].value);
来访问，IE老是提示我length不是对象，可是在JS中，遇到同名的输入框不是会自动将它们变为数组吗？随后就可以通过数组下标访问他，可是好象在这行不通啊。

Answer 11

阿信，忘了问最重要一点：getElementsByName及getElementsById这些语法我以前都没用过，我想你知道还有很多我们没见过的方法和事件吧，只想问问你这些知识是从哪来的，MSDN？还是有其它的来源，能不能介绍给我们啊，这样才不至于每个小问题都要来CSDN上问啊。
呵呵，有点贪心了!

Answer 12

var txt=document.getElementsByName("text1");