使用insertRow动态添加的表格行,在页面提交后怎么才能保留下来?

提交的时候把整个 table 的 outerHTML 放在一个隐藏域里提交到服务器端, 再回定到客户端上来,
至于提交到服务器的 table 是否要入库等, 你自己看着办

解决方案 »

  1.   

    <html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>JK:支持民族工业,尽量少买X货</title><style>
    TD,INPUT{ font-size:12; }
    </style>
    </head><body bgcolor=EEEEEE>
    <form name="frm" action="about:结果页面" method=post >
    <h4 align=center>JK的动态明细示例</h4><table align="center" bordercolor=cccccc border=1  width=100% >
    <tr>
    <td width=500>
    </td>
    <td align=right>
          <input type="button"  value="增加" class="bottom" onclick="addDetailProcess();">&nbsp;      
          <input type="button"  value="删除" class="bottom" onclick="delDetailProcess();">&nbsp;      
          <input type="button"  value="完成" class="bottom" onclick="submitProcess();">
          
    </td>
    </tr>
    </table>
    <div width=100% id=thedetailtableDIV>
    <table align="center" bordercolor=cccccc border=1 width=100% >
    <tbody id="tbDetailPrepare">
    <tr>
    <td ><input type="checkbox" name="record_select" ></td>
    <td ><input type="text" name="detail_id" value='' ></td>
    <td ><input type="text" name="detail_name" value='' ></td>
    </tr>
    </tbody>
      <tr bgcolor=eeeeee id="trDetailTitles"> 
        <td ><input type=checkbox onclick="selectallcheckbox(this)"></td>
        <td >明细ID*</td>
        <td >明细NAME</td>
      </tr>
      <tbody id="tbDetailUsed" >
    <tr>
    <td ><input type="checkbox" name="record_select" ></td>
    <td ><input type="text" name="detail_id" value='' ></td>
    <td ><input type="text" name="detail_name" value='' ></td>
    </tr> <tr height=0 ><td colspan=100 height=0 > 合计</td></tr>
      </tbody> </table>
    </div>
    </form><input name="theHistoryRecord" type=hidden value="">
    </body></html><script language=javascript> window.onload = historyOncemore;
    window.onbeforeunload = fixHistory; function fixHistory() //记住历史
    {
    document.all("theHistoryRecord").value=document.all("thedetailtableDIV").innerHTML.replace(/\n/g,"");
    } function historyOncemore() //恢复历史
    {
    if (document.all("theHistoryRecord").value!="")
    {document.all("thedetailtableDIV").innerHTML=document.all("theHistoryRecord").value;
    }
    } function selectallcheckbox(obj) //全选或全不选
    {
    var tureorfalse=obj.checked;
    var theDetail=tbDetailUsed.rows;
    for(var i=0;i<theDetail.length-1;i++)
    {
    theDetail[i].all("record_select").checked=tureorfalse;
    }
    }


    function addDetailProcess(afterRowIndex) //增加明细
    {
    var alltbDetailUsed= document.all("tbDetailUsed").rows;
    var theFirstSelectedDetail;
    if (afterRowIndex==null)
    {
    for(var i=0;i<alltbDetailUsed.length-1;i++)
    {
    if (alltbDetailUsed[i].all("record_select").checked==true) {theFirstSelectedDetail=i;break;}
    }
    if (theFirstSelectedDetail==null) {theFirstSelectedDetail=alltbDetailUsed.length-2;}
    }
    else theFirstSelectedDetail=afterRowIndex;
    var newRow = document.all("tbDetailPrepare").rows[0].cloneNode(true);
    var desRow = alltbDetailUsed[theFirstSelectedDetail+1];
    desRow.parentElement.insertBefore(newRow,desRow ); }

    function delDetailProcess() //删除明细
    {
    var alltbDetailUsed= document.all("tbDetailUsed").rows;
    if (confirm("确定选择正确并且要将这些明细删除")==false) return false;
    for(var i=0;i<alltbDetailUsed.length-1;i++)
    {
    if (alltbDetailUsed[i].all("record_select").checked==true)
    {
    document.all("tbDetailUsed").deleteRow(i);
    i=i-1;
    }
    }
    } function submitProcess()
    {
      document.frm.submit();
    }
    </script>