js 为表格增加行动态

zoukankan html css js c++ java

js 为表格增加行动态

<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();"> 
              <input   type="button"     value="删除"   class="bottom"   onclick="delDetailProcess();"> 
              <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%   >
      <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>


<table   id="tbDetailPrepare"   style="display:none">
<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>
</table>


<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!="")
{
alert(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)
{
      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>

作者：水木　　　　

出处：http://www.hechunbo.com/

查看全文

相关阅读:
鸡啄米vc++2010系列19（常用控件：静态文本框）
鸡啄米vc++2010系列18（颜色对话框）
鸡啄米vc++2010系列17（字体对话框）
鸡啄米vc++2010系列16（文件对话框）
鸡啄米vc++2010系列15（消息对话框）
鸡啄米vc++2010系列14（一般属性页对话框的创建）
鸡啄米vc++2010系类13（向导对话框的创建）
鸡啄米vc++2010系列12（属性页对话框）
鸡啄米vc++2010系列11（非模态对话框的创建）
鸡啄米vc++2010系列10（模态对话框及其弹出过程）

原文地址：https://www.cnblogs.com/hsapphire/p/1641956.html

js 为表格增加行 动态

js 为表格增加行动态