动态表格：给每行tr一个id,如何动态定位行并进行删除？

<HTML>
<HEAD>
<TITLE> New Document </TITLE>
</HEAD><BODY>
<input type="button" name="btn" value="添加一行" onClick="addrow()">
<table id="activeTable" style="border: #000000 solid 1px;" cellspacing="0" width="100%" cellpadding="0">
    <caption>請&nbsp;求&nbsp;内&nbsp;訳</caption>
    <tr>
      <td nowrap>請求月</td>
      <td nowrap>計上月</td>
      <td nowrap>請求件名</td>
      <td nowrap>入金期限日</td>
      <td nowrap>金額</td>
      <td nowrap>消費税</td>
      <td nowrap>備考</td>
  <td nowrap>操作</td>
    </tr>
<table>
</BODY>
</HTML>
<SCRIPT LANGUAGE="JavaScript">
function addrow() {
var row = activeTable.insertRow(activeTable.rows.length);
var col = row.insertCell(0);
var i = row.rowIndex;
col.innerHTML = '<input name="seituki1" size="2"><input name="seituki2" size="2">'; 
col = row.insertCell(1); 
col.innerHTML = '<input name="keituki1" size="2"><input name="keituki2" size="2">'; 
col = row.insertCell(2); 
col.innerHTML = '<input name="kenmei" size="18" value="">'; 
col = row.insertCell(3); 
col.innerHTML = '<input name="kigen" size="17">'; 
col = row.insertCell(4); 
col.innerHTML = '<input name="kingaku1" size="15" style="text-align: right">'; 
col = row.insertCell(5); 
col.innerHTML = '<input name="zei1" size="13" style="text-align: right">';
col = row.insertCell(6); 
col.innerHTML = '<input name="bikou1" value="' + i + ' " size="15">';
col = row.insertCell(7);
col.innerHTML = '<button onClick="delrow()">删除本行</button>';
}function delrow () {
var srcName = document.getElementsByTagName("button");
var rowIndex = 0;
for ( i=0;i<srcName.length;i++){
if(srcName[i]==event.srcElement)
rowIndex=i;
}
activeTable.deleteRow(rowIndex + 1);
} 
</script>

解决方案 »

  1.   

    http://expert.csdn.net/Expert/topic/1423/1423204.xml?temp=.2212183
      

  2.   


    <html>
    <head>
    <title>Apollowireless.com - Back Office </title>
    <LINK href="/style/style_back.css" type="text/css" rel=stylesheet>
    <script language="JavaScript">
    <!--
    function LogoConfirm(src){
      var Lstatus=window.confirm(' Are you sure you want to sign out?');
      if(Lstatus){
        window.location="/jsp/back/account/logout.jsp";
      }
    }function OverFunction( wol1, Alink ){
      wol1.bgColor='#FFFFFF';
     // wol2.bgColor='#000000';
      Alink.className="Currentmenumain";
      }function OutFunction( wol1, Alink ){
      wol1.bgColor='#0C1165';
      //wol2.bgColor='#C4D0F6';
      Alink.className="menu";
      }
    function OverFunctionMenu( wol1, Alink ){
      wol1.bgColor='#ffcc00';
      Alink.className="Currentmenumain";
      }function OutFunctionMenu( wol1, Alink ){
      wol1.bgColor='#515CAE';
      Alink.className="menu";
      }//-->
    </script>
    </head><body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    <form method=post action="" name="thisForm">
    <table width="780" border="0" cellspacing="0" cellpadding="0" align="center">
      <tr> 
        <td>
          <table width="760" border="0" cellspacing="0" cellpadding="2" align="center"><script language="JavaScript">
    <!--
    function delItem(){
      var line=parseInt(event.srcElement.ln);
      if (line>0){
        for (i=1;i<qtylist.rows.length;i++){
          if (ttr[i].ln==line) {
            if (confirm("Are you sure you want to delete this record?")){
              qtylist.deleteRow(i);
              return;
            }
          }
        }
      }
    }
    var allCount=1;
    function newqtylist(){
      var lastcunt=0;
      var strHTML="Record "+allCount;
      strHTML+="<input type=\"hidden\" name=\"STATUS"+allCount+"\" value=\"1\">\r\n";  newRow=qtylist.insertRow(qtylist.rows.length);
      newRow.id="ttr";
      newRow.ln=allCount;
      newRow. bgColor="#EEEEEE";  c0=newRow.insertCell(0);
      c0.ln=allCount;
      c0.onclick=delItem;
      c0.innerHTML="<input type=button value=\"del\" width=\"12\" ln=\""+allCount+"\" height=\"12\" border=0 alt=\"Remove Item\" style=\"cursor:hand;\">";  c1=newRow.insertCell(1);
      c1.innerHTML=strHTML;
      document.thisForm.proqty.value=allCount;
      allCount++
    }
    //-->
            </script>
    <input type="hidden" name="proqty">
            <tr>
              <td>
               <table width="400" cellspacing="1" cellpadding="2" border="0" bgcolor="#999999" id="qtylist" rules="rows" align=center>
               <tr id="ttr" ln="0" bgColor=#eeeeee>
                 <td width="10" valign="top" ln="0"></td>
                 <td><input type="hidden" name="proqty" value="0">
               Record 0
                 </td>
                </tr>          </table>
              <table align=center border=1  borderColorDark=white borderColorLight=gray cellpadding=2 cellspacing=1 width="400">
                <tr> 
                  <td align=center onclick="newqtylist()" class=controlPanel onmouseout="this.className='controlPanel'" onmouseover="this.className='controlPanelMouseOver'"><font style="font-size:14px;">Add a New Record, Click here</font></td>
                </tr>
              </table>
             </td>
             </tr>
            </table>
         </td>
      </tr>
    </form>
    </table>
    </body>
    </html>
      

  3.   

    <table width="100%" border="1" id=otable>
      <tr> 
        <td><div align="center">科研工作项目</div></td>
        <td><div align="center">预期目标</div></td>
        <td><div align="center">进度</div></td>
        <td><div align="center">工作者</div></td>
    <td></td>
      </tr>
      <tr> 
        <td><INPUT name=ItemSub size=10></td>
        <td><INPUT name=ItemObject size=10></td>
        <td><INPUT name=ItemSche size=10></td>
        <td><INPUT name=Workman size=10></td>
      </tr>
    </table>
    <input type=button name=b1 value=del onclick=del()>
    <input type=button name=b1 value=add onclick=add()><script language=javascript>
    <!--
    function del()
    {
       otable.deleteRow(1);   
      
    }function add()
    { var madd=otable.rows.length;
      var orow1=otable.insertRow(otable.rows.length);
      //insert one row.
      var arows=otable.rows;
      //retrieve the rows collection for the table
      var acells=orow1.cells; 
      //retrieve the cells collection for the new row
      var ocell1_1=arows(orow1.rowIndex).insertCell(acells.length);
      var ocell1_2=arows(orow1.rowIndex).insertCell(acells.length);
      var ocell1_3=arows(orow1.rowIndex).insertCell(acells.length);
      var ocell1_4=arows(orow1.rowIndex).insertCell(acells.length);
      ocell1_1.innerHTML="<INPUT name=ItemSub"+madd+" size=10>";
      ocell1_2.innerHTML="<INPUT name=Itemobject"+madd+" size=10>";
      ocell1_3.innerHTML="<INPUT name=ItemShce"+madd+" size=10>";
      ocell1_4.innerHTML="<INPUT name=workman"+madd+" size=10>";
    }-->
    </script>