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"   οnclick="addDetailProcess();"> 
              <input   type="button"     value="删除"   class="bottom"   οnclick="delDetailProcess();"> 
              <input   type="button"     value="完成"   class="bottom"   οnclick="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   οnclick="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>

js 为表格增加行动态相关推荐

表格(增加行号) http://www.blogjava.net/zeyuphoenix/archive/2010/04/19/318788.html
表格(增加行号) 前面介绍了关于JTable的基本使用.JTable单元格的Renderer和Editor.JTable的单元格的合并和拆分.JTableHeader的Renderer和Editor. ...
用js实现表格行的动态添加与删除
对应的html代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> ...
JS实现表格增、删、排序
1.根据图片,完成页面布局,100%还原,圆角使用border-radius:3px;2.实现文本框添加姓名.年龄,要求不能添加空值,表格中ID需要按照序号依次自动生成.3.点击移入变色按钮开启变色, ...
表格动态增加行(JS)
我最近一直在学Javascript, 因为在项目用的比较多,虽然现在大家都在说Web标准,实际上还没有一个严格的定义,我理解的Web标准是把结构.表现.行为这三者结合表现出来就OK了.那用什么来表现呢 ...
js动态增加行删除行
//动态增加行 function addRow(tab){var title = "";var table = document.getElementById(tab);var n ...
Vue+element 实现表格的动态增加行
功能需求:1.实现一个表格,可以增加行 ,可以修改每一行的数据: 2.获取选中的行的数据,获取选中行的索引:3.根据获取的行的索引删除相应的一行的数据. tableData的数据是写死的,具体开发可以 ...
java行数可变的表格,怎么在表格中自动增加行，并对输入的数据作判断
当前位置:我的异常网» Java Web开发 » 怎么在表格中自动增加行,并对输入的数据作判断怎么在表格中自动增加行,并对输入的数据作判断 www.myexceptions.net 网友分享于:2 ...
对表格实现修改查询html,【原生】js实现表格的增删改查
说在前面的,写给小白白的,大神请绕道~ 今天用原生js写一下动态表格的增删改查,主要是熟悉一下js的DOM操作. 首先,做一个表格,用来显示提交的数据,如图下: 此处,我添加了编号.姓名.密码.生日. ...
js 对表格的动态操作（动态添加行，删除该行，在指定位置添加控件）
***************************************************************** js动态添加表的列,并在列中添加控件的方法<html> ...

js 为表格增加行动态