关于innerHTML如更改其中的ID?

问题是请看//注释把所有代码保存为test.htm运行即可.

解决方案 »

  1.   

    <html>
    <form action="Out1_Record_Update.asp" name="form1" >
    <script language="javascript">
    var j=0
    function add_row(){
    k=j+1
    j=sqd.rows.length;
    newRow=document.all.sqd.insertRow(-1)
    newcell=newRow.insertCell()
    newcell.style.backgroundColor='#f7f7f7'
    newcell.align="center"
    newcell.innerHTML=j
    newcell=newRow.insertCell()
    newcell.style.backgroundColor='#f7f7f7'
    newcell.align="center"
    newcell.innerHTML="<input name=ID type=radio>"
    newcell=newRow.insertCell()
    newcell.style.backgroundColor='#f7f7f7'
    newcell.align="center"
    newcell.innerHTML="<SELECT ID='MingCheng" + j + "'NAME='MingCheng' onfocus='func(this.id,this.parentNode.parentNode.childNodes[0].innerText)'><OPTION selected></OPTION></SELECT>"
    newcell=newRow.insertCell()
    newcell.style.backgroundColor='#f7f7f7'
    newcell.align="center"
    newcell.innerHTML="<SELECT ID='XingHao" + j + "'NAME='XingHao'><OPTION selected></OPTION></SELECT>"
    newcell=newRow.insertCell()
    newcell.style.backgroundColor='#f7f7f7'
    newcell.align="center"
    newcell.innerHTML="<SELECT ID='ShuLiang" + j + "'NAME='ShuLiang'><OPTION selected></OPTION></SELECT>"
    }
    function del_row() {
    if(sqd.rows.length==1) return;
    var checkit = false
    for (var i=0;i<document.all.ID.length;i++) {
    if (document.all.ID[i].checked) {checkit=true;
    sqd.deleteRow(i)
    break;
    }
    }if (checkit) {
    //alert(this.id.replace(/\d+/,this.parentNode.parentNode.childNodes[0].innerHTML));
    for(i=1;i<sqd.rows.length;i++){
    sqd.rows[i].cells[0].innerText=i
    //此?如何将把Name?MingCheng、XingHao、ShuLiang的ID依次改? "MingCheng" +i、"XingHao"+i、"ShuLiang"+i ？
    //即是随?增加几行，依按行?序点?MingCheng下拉框，?出的ID是??的，当随意?除一行，再按行?序点?MingCheng下拉框，其?出的ID就不是??的，如何做到??的（当然从1?始）
    }
    } else
    {
    alert("???一个要?除的?象");
    return false}
    }function func(a,b){
    //alert(a)
    //alert(b)
    alert(a.replace(/\d+/,b))
    }
    </script>
    </head>
    <body bgcolor="#C4D9F9"><div align="center">
    <table width="99%" border=0 cellpadding=2 cellspacing=1 bgcolor="#C4D9F9">
    <tr>
    <td align=center valign=top bgcolor=#C4D9F9>
    <table id="sqd" width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#999999">
    <tr bgcolor="#BAC2DA">
    <td height="25">
    <div align="center"><b><font size="2">序号</font></b></div></td>
    <td>
    <div align="center"><b><font size="2">?中
    </font></b><font color="#0000FF" size="3">
    <input name=Number type=hidden style="font-weight: 700" >
    </font>
    </div></td>
    <td>
    <div align="center"><b><font size="2">零配件名称</font></b></div></td>
    <td>
    <div align="center"><b><font size="2">零配件型号</font></b></div></td>
    <td>
    <div align="center"><b><font size="2">数量</font></b></div></td>
    </tr>
    </table>
    <br>
    <input name="b1" type="button" onClick=add_row() class="button" value=" 添 加 ">
    <input name="b2" onclick=del_row() type="button" class="button" value=" ? 除 ">
    </td>
    </tr>
    </table>
    </form>
    </div>
    </body>
    </html>
      

  2.   

    <html>
    <form action="Out1_Record_Update.asp" name="form1" >
    <script language="javascript">
    var j=0
    function add_row(){
    k=j+1
    j=sqd.rows.length;
    newRow=document.all.sqd.insertRow(-1)
    newcell=newRow.insertCell()
    newcell.style.backgroundColor='#f7f7f7'
    newcell.align="center"
    newcell.innerHTML=j
    newcell=newRow.insertCell()
    newcell.style.backgroundColor='#f7f7f7'
    newcell.align="center"
    newcell.innerHTML="<input name=ID type=radio>"
    newcell=newRow.insertCell()
    newcell.style.backgroundColor='#f7f7f7'
    newcell.align="center"
    newcell.innerHTML="<SELECT ID='MingCheng" + j + "' NAME='MingCheng' onfocus='alert(this.id);'><OPTION selected></OPTION></SELECT>"
    newcell=newRow.insertCell()
    newcell.style.backgroundColor='#f7f7f7'
    newcell.align="center"
    newcell.innerHTML="<SELECT ID='XingHao" + j + "'NAME='XingHao'><OPTION selected></OPTION></SELECT>"
    newcell=newRow.insertCell()
    newcell.style.backgroundColor='#f7f7f7'
    newcell.align="center"
    newcell.innerHTML="<SELECT ID='ShuLiang" + j + "'NAME='ShuLiang'><OPTION selected></OPTION></SELECT>"
    }
    function del_row() {
    if(sqd.rows.length==1) return;
    var ind=0;
    var checkit = false
    for (var i=0;i<document.all.ID.length;i++) {
    if (document.all.ID[i].checked) {
                ind=i;
    checkit=true;
    sqd.deleteRow(i)
    break;
    }
    } if (checkit) {
    for(i=1;i<sqd.rows.length;i++){
        sqd.rows[i].cells[0].innerText=i;
        if(i>=ind-1 && i<sqd.rows.length-1)
        {
           var newInd=i+2;
           var newInd_1=i+1;
                   document.body.insertAdjacentHTML("BeforeEnd","var mingcheng=document.getElementById(\"MingCheng"+newInd+"\")");
           eval("var mingcheng=document.getElementById(\"MingCheng"+newInd+"\")");
           eval("var xinghao=document.getElementById(\"XingHheng"+newInd+"\")");
           eval("var shuliang=document.getElementById(\"ShuLiang"+newInd+"\")");
           mingcheng.id="MingCheng"+newInd_1;
           xinghao.id="XingHao"+newInd_1;
           shuliang="ShuLiang"+newInd_1;     }
        }
    }else{
        alert("请选择一个要删除的对象");
        return false;
    }
    }
    </script>
    <body bgcolor="#C4D9F9"><div align="center">
    <table width="99%" border=0 cellpadding=2 cellspacing=1 bgcolor="#C4D9F9">
      <tr>
        <td align=center valign=top bgcolor=#C4D9F9>
    <table id="sqd" width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#999999">
            <tr bgcolor="#BAC2DA">
              <td height="25">
                <div align="center"><b><font size="2">序号</font></b></div></td>
              <td>
                <div align="center"><b><font size="2">选中
                    </font></b><font color="#0000FF" size="3">
                    <input name=Number type=hidden style="font-weight: 700" >
               </font>
              </div></td>
              <td>
                <div align="center"><b><font size="2">零配件名称</font></b></div></td>
              <td>
                <div align="center"><b><font size="2">零配件型号</font></b></div></td>
              <td>
                <div align="center"><b><font size="2">数量</font></b></div></td>
            </tr>
          </table>
            <br>
            <input name="b1" type="button" onClick=add_row() class="button" value=" 添 加 ">
            <input name="b2" onclick=del_row() type="button" class="button" value=" 删 除 ">
        </td>
      </tr>
    </table>
    </form>
    </div>
    </body>
    </html>
      

  3.   

    <html>
    <form action="Out1_Record_Update.asp" name="form1" >
    <script language="javascript">
    var j=0
    function add_row(){
    k=j+1
    j=sqd.rows.length;
    newRow=document.all.sqd.insertRow(-1)
    newcell=newRow.insertCell()
    newcell.style.backgroundColor='#f7f7f7'
    newcell.align="center"
    newcell.innerHTML=j
    newcell=newRow.insertCell()
    newcell.style.backgroundColor='#f7f7f7'
    newcell.align="center"
    newcell.innerHTML="<input name=ID type=radio>"
    newcell=newRow.insertCell()
    newcell.style.backgroundColor='#f7f7f7'
    newcell.align="center"
    newcell.innerHTML="<SELECT ID='MingCheng" + j + "' NAME='MingCheng' onfocus='alert(this.id);'><OPTION selected></OPTION></SELECT>"
    newcell=newRow.insertCell()
    newcell.style.backgroundColor='#f7f7f7'
    newcell.align="center"
    newcell.innerHTML="<SELECT ID='XingHao" + j + "'NAME='XingHao'><OPTION selected></OPTION></SELECT>"
    newcell=newRow.insertCell()
    newcell.style.backgroundColor='#f7f7f7'
    newcell.align="center"
    newcell.innerHTML="<SELECT ID='ShuLiang" + j + "'NAME='ShuLiang'><OPTION selected></OPTION></SELECT>"
    }
    function del_row() {
    if(sqd.rows.length==1) return;
    var ind=0;
    var checkit = false
    for (var i=0;i<document.all.ID.length;i++) {
    if (document.all.ID[i].checked) {
                ind=i;
    checkit=true;
    sqd.deleteRow(i)
    break;
    }
    } if (checkit) {
    for(i=1;i<sqd.rows.length;i++){
        sqd.rows[i].cells[0].innerText=i;
        if(i>=ind-1 && i<sqd.rows.length-1)
        {
           var newInd=i+2;
           var newInd_1=i+1;
                  // document.body.insertAdjacentHTML("BeforeEnd","var mingcheng=document.getElementById(\"MingCheng"+newInd+"\")");
           eval("var mingcheng=document.getElementById(\"MingCheng"+newInd+"\")");
           eval("var xinghao=document.getElementById(\"XingHheng"+newInd+"\")");
           eval("var shuliang=document.getElementById(\"ShuLiang"+newInd+"\")");
           mingcheng.id="MingCheng"+newInd_1;
           xinghao.id="XingHao"+newInd_1;
           shuliang="ShuLiang"+newInd_1;     }
        }
    }else{
        alert("请选择一个要删除的对象");
        return false;
    }
    }
    </script>
    <body bgcolor="#C4D9F9"><div align="center">
    <table width="99%" border=0 cellpadding=2 cellspacing=1 bgcolor="#C4D9F9">
      <tr>
        <td align=center valign=top bgcolor=#C4D9F9>
    <table id="sqd" width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#999999">
            <tr bgcolor="#BAC2DA">
              <td height="25">
                <div align="center"><b><font size="2">序号</font></b></div></td>
              <td>
                <div align="center"><b><font size="2">选中
                    </font></b><font color="#0000FF" size="3">
                    <input name=Number type=hidden style="font-weight: 700" >
               </font>
              </div></td>
              <td>
                <div align="center"><b><font size="2">零配件名称</font></b></div></td>
              <td>
                <div align="center"><b><font size="2">零配件型号</font></b></div></td>
              <td>
                <div align="center"><b><font size="2">数量</font></b></div></td>
            </tr>
          </table>
            <br>
            <input name="b1" type="button" onClick=add_row() class="button" value=" 添 加 ">
            <input name="b2" onclick=del_row() type="button" class="button" value=" 删 除 ">
        </td>
      </tr>
    </table>
    </form>
    </div>
    </body>
    </html>
      

  4.   

    大家的方法都非常好,实现了我提出的问题.但是当删除第一行时就会提示第1行的ID重复了.如何更改?另外,当select 名为MingCheng的Option里有值时,这样重置删除行后MingCheng的ID,其原用户已选定的OPTION值如何不变?即重置ID后,应该保持不变删除行后的行MingCheng的已选好的Option值.
      

  5.   

    大家的方法都非常好,实现了我提出的问题.但是当删除第一行时就会提示第1行的ID重复了.如何更改?另外,当select 名为MingCheng的Option里有值时,这样重置删除行后MingCheng的ID,其原用户已选定的OPTION值如何不变?即重置ID后,应该保持不变删除行后的行MingCheng的已选好的Option值.