<HTML>
<HEAD>
<TITLE>表格动态追加、插入、删除行</TITLE>
</HEAD>
<BODY >
<table id="DetailTable" border="1" width="60%" align="center" cellpadding="2" cellspacing="0" bordercolor="#000000" bordercolordark="#ffffffff" >
<tr>
<td width="40%" align="center" bgcolor="#999999">姓名</td>
<td width="20%" align="center" bgcolor="#999999">性别</td>
<td width="40%" align="center" bgcolor="#999999">年龄</td>
</tr>
<tr>
<td width="40%" align="center"> <input type="text" name="username" style="width:200px"/></td>
<td width="20%" align="center">
<select style="width:100px">
<option value="boy">男</option>
<option value="girl">女</option>
</select>
</td>
<td width="40%" align="center"><input type="text" name="age" style="width:200px"/></td>
</tr>
</table>
<table id="TmpTable" style="display:none;">
<tr>
<td width="40%" align="center"><input name="msgid" type="radio" value="msgid"><input type="text" name="username" style="width:200px"/></td>
<td width="20%" align="center">
<select style="width:100px">
<option value="boy">男</option>
<option value="girl">女</option>
</select>
</td>
<td width="40%" align="center"><input type="text" name="age" style="width:200px"/></td>
</tr>
</table>
<br>
<table border="0" width="96%" align="center" >
<tr><td align="center">
<input type=button class="appButton" onClick="doAppend(DetailTable)" value=" 追 加 " >
<input type=button class="appButton" onClick="doInsert(DetailTable)" value=" 插 入 " >
<input type=button class="appButton" onClick="doRemove(DetailTable)" value=" 删 除 " >
</td>
</table>
<script language="javascript">
function doAppend(obj){
if(obj==null){
return;
}
rows=obj.rows;
if(rows==null){
return;
}
srcElem=rows[rows.length-1];
var tmpTable=TmpTable;
if(tmpTable==null){
return;
}
var trows=tmpTable.rows;
if(trows==null){
return;
}
newrow = obj.insertRow(srcElem.rowIndex+1);
temprow=trows[0].cloneNode(true);
newrow.replaceNode(temprow);
newrow=null;
tmprow=null;
}
function removeAllRow(obj){
if(obj==null){
return;
}
rows=obj.rows;
for(i=1;i<rows.length;i++){
desc=rows[i];
obj.deleteRow(desc.sectionRowIndex);
i--
rows=obj.rows;
}
}
function doInsert(obj){
var srcElem=getSelectedRow(obj);
if(srcElem==null){
alert("请选择要插入的行");
return;
}
var tmpTable=TmpTable;
if(tmpTable==null){
return;
}
var trows=tmpTable.rows;
if(trows==null){
return;
}
window.status="";
newrow = obj.insertRow(srcElem.rowIndex);
temprow=trows(0).cloneNode(true);
newrow.replaceNode(temprow);
window.status="";
}
function doRemove(obj){
srcElem=getSelectedRow(obj);
if(srcElem==null){
alert("请选则要删除的行");
return;
}
obj.deleteRow(srcElem.sectionRowIndex);
}
function getSelectedRow(obj){
if(obj==null){
return null;
}
rows=obj.rows;
if(rows==null){
return null;
}
var field=document.all.msgid;
if(field==null){
return null;
}
var srcElem=null;
for(i=0; i<field.length; i++){
if(field[i].checked){
srcElem=field[i];
break;
}
}
if(srcElem==null){
return null;
}
while (srcElem.tagName != "TR"){
srcElem = srcElem.parentElement;
}
return srcElem;
}
</script>
</BODY>
</HTML>
分享到：
相关推荐
插入Times 2号字标记 插入表格标记 插入行标记 插入单元格标记 插入超链接标记 插入居中标记 插入段落标记 插入换行标记 插入图像标记 插入粗体字标记 插入斜体字标记 插入下划线标记 插入注释...
★使用本控件开发的网站，网页上表格行的插入、追加、删除、修改、上下移动、拷贝、粘贴等操作，能够立即在浏览器客户端完成，操作按钮在上图表格的左下部。 ★提交后的数据为一个DataTable。用户可使用...
用JQUERY增删元素JQuery有增加和删除元素的方法。主要分为内部插入，外部插入，包裹，替换，删除。...下面的例子是点击增加按钮表格就会在最后一行插入新的一行再点击删除按钮删除最后一行 代码如下: <!DO
11.13 向表格追加一行数据 11.14 获取客户端IP 11.15 向Firebug的控制面板发送消息 11.16 根据不同的屏幕大小显示不同的网页 11.17 jQuery遍历对象的属性 11.18 最优化的循环语句写法 11.19 如何构建最优化的字符串 ...
任务4 生成表查询 任务5 追加查询 任务6 更新查询 任务7 删除查询 7.4 窗体设计 任务1 自动创建窗体 任务2 使用向导创建窗体 任务3使用设计视图创建窗体 任务4 窗体布局与修饰 任务5 标签控件的使用 7.5
因为本报表系统支持多页报表，所以提供了追加、插入、删除表页的功能及设置页签的功能，用途与字面意思相同。 公式单元背景颜色：把公式单元以不同的颜色显示，其中，在报表中显示公式的单元与在报表中只显示数据的...
删除行集和行范围。 调整表大小或插入行。 查询表中的列和行。 读写标题关键字。 以图块压缩格式（RICE，GZIP，PLIO，HCOMPRESS）读取和写入图像。 直接读取/写入gzip文件。 读取unix compress（.Z，.zip）和
4、筛选各班前N名：筛选同一表格每个单位（班级）前N名的优秀人员（得分）的行数据，删除其余人员的行数据。 5、英语单词与解释分类：可以将中小学英语单词按照有几个连续字母相同来分类，例如可以将单词中含4个...
7.2.1 突出显示行 7.2.2 工具提示条 7.2.3 折迭和扩展 7.2.4 筛选 7.2.5 完成的代码 7.3 小结 第8章 构建功能型表单 8.1 改进基本的表单 8.1.1 渐进增强表单样式 8.1.2 根据条件显示的字段 8.1.3 表单验证...
JSP动态网站开发基础教程与实验指导(从基础到应用)光盘 作者：王晓军 田中雨 刘跃军 等 全书共分12章，介绍了，JSP开发环境配置，页面组成元素，内置对象，访问数据库技术，JavaBean，Servlet技术，以及开发JSP...
8.10 删除商品 8.11 修改送货信息 8.12 完成的代码 8.13 小结 第9章 滑移和翻转 9.1 标题翻转效果 9.1.1 设置页面 9.1.2 取得新闻源 9.1.3 设置翻转效果 9.1.4 标题...
实例045 用数组设置JTable表格的列名与列宽 55 3.2 数组操作 57 实例046 数组的下标界限 57 实例047 按钮控件数组实现计数器界面 58 实例048 复选框控件数组 59 实例049 用数组反转字符串 60 3.3 数组排序与查询 61 ...
• 12.5.htm 结点插入与追加 • 12.6.htm 结点复制 • 12.7.htm 结点删除与替换 • 12.8.htm 处理文本结点的方法 • 12.9.htm 处理属性的方法 • 12.10....