js实现table添加行tr、删除行tr、清空行tr的简单实例


Posted in Javascript onOctober 15, 2016

如下所示:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE> New Document </TITLE> 
<META NAME="Generator" CONTENT="EditPlus"> 
<META NAME="Author" CONTENT=""> 
<META NAME="Keywords" CONTENT=""> 
<META NAME="Description" CONTENT=""> 
<script language="javascript">// Example: obj = findObj("image1"); 
function findObj(theObj, theDoc) 
{  
var p, i, foundObj;  
if(!theDoc) theDoc = document;  
if( (p = theObj.indexOf("?")) > 0 && parent.frames.length)  
{  theDoc = parent.frames[theObj.substring(p+1)].document;  theObj = theObj.substring(0,p); } if(!(foundObj = theDoc[theObj]) && theDoc.all) foundObj = theDoc.all[theObj]; for (i=0; !foundObj && i < theDoc.forms.length; i++)   foundObj = theDoc.forms[i][theObj]; for(i=0; !foundObj && theDoc.layers && i < theDoc.layers.length; i++)   foundObj = findObj(theObj,theDoc.layers[i].document); if(!foundObj && document.getElementById) foundObj = document.getElementById(theObj);  return foundObj; 
} 
//添加一个参与人填写行 
function AddSignRow(){ //读取最后一行的行号,存放在txtTRLastIndex文本框中  
var txtTRLastIndex = findObj("txtTRLastIndex",document); 
var rowID = parseInt(txtTRLastIndex.value); 
 
var signFrame = findObj("SignFrame",document); 
//添加行 
var newTR = signFrame.insertRow(signFrame.rows.length); 
newTR.id = "SignItem" + rowID; 
 
//添加列:序号 
var newNameTD=newTR.insertCell(0); 
//添加列内容 
newNameTD.innerHTML = newTR.rowIndex.toString(); 
 
//添加列:姓名 
var newNameTD=newTR.insertCell(1); 
//添加列内容 
newNameTD.innerHTML = "<input name='txtName" + rowID + "' id='txtName" + rowID + "' type='text' size='12' />"; 
 
//添加列:电子邮箱 
var newEmailTD=newTR.insertCell(2); 
//添加列内容 
newEmailTD.innerHTML = "<input name='txtEMail" + rowID + "' id='txtEmail" + rowID + "' type='text' size='20' />"; 
 
//添加列:电话 
var newTelTD=newTR.insertCell(3); 
//添加列内容 
newTelTD.innerHTML = "<input name='txtTel" + rowID + "' id='txtTel" + rowID + "' type='text' size='10' />"; 
 
//添加列:手机 
var newMobileTD=newTR.insertCell(4); 
//添加列内容 
newMobileTD.innerHTML = "<input name='txtMobile" + rowID + "' id='txtMobile" + rowID + "' type='text' size='12' />"; 
 
//添加列:公司名 
var newCompanyTD=newTR.insertCell(5); 
//添加列内容 
newCompanyTD.innerHTML = "<input name='txtCompany" + rowID + "' id='txtCompany" + rowID + "' type='text' size='20' />"; 
 
 
//添加列:删除按钮 
var newDeleteTD=newTR.insertCell(6); 
//添加列内容 
newDeleteTD.innerHTML = "<div align='center' style='width:40px'><a href='javascript:;' onclick=\"DeleteSignRow('SignItem" + rowID + "')\">删除</a></div>"; 
 
//将行号推进下一行 
txtTRLastIndex.value = (rowID + 1).toString() ; 
} 
//删除指定行 
function DeleteSignRow(rowid){ 
var signFrame = findObj("SignFrame",document); 
var signItem = findObj(rowid,document); 
alert(rowid); 
//获取将要删除的行的Index 
var rowIndex = signItem.rowIndex; 
 
//删除指定Index的行 
signFrame.deleteRow(rowIndex); 
 
//重新排列序号,如果没有序号,这一步省略 
for(i=rowIndex;i<signFrame.rows.length;i++){ 
signFrame.rows[i].cells[0].innerHTML = i.toString(); 
} 
} 
//清空列表 
function ClearAllSign(){ 
if(confirm('确定要清空所有参与人吗?')){ 
var signFrame = findObj("SignFrame",document); 
var rowscount = signFrame.rows.length; 
 
//循环删除行,从最后一行往前删除 
for(i=rowscount - 1;i > 0; i--){ 
  signFrame.deleteRow(i); 
} 
 
//重置最后行号为1 
var txtTRLastIndex = findObj("txtTRLastIndex",document); 
txtTRLastIndex.value = "1"; 
 
//预添加一行 
AddSignRow(); 
} 
} 
</script> 
</HEAD> 
 
<BODY> 
<div> 
<table width="613" border="0" cellpadding="2" cellspacing="1" id="SignFrame"> 
       <tr id="trHeader"> 
        <td width="27" bgcolor="#96E0E2">序号</td> 
        <td width="64" bgcolor="#96E0E2">用户姓名</td> 
        <td width="98" bgcolor="#96E0E2">电子邮箱</td> 
        <td width="92" bgcolor="#96E0E2">固定电话</td> 
        <td width="86" bgcolor="#96E0E2">移动手机</td> 
        <td width="153" bgcolor="#96E0E2">公司名称</td> 
        <td width="57" align="center" bgcolor="#96E0E2"> </td> 
       </tr> 
    </table> 
  </div> 
  <div> 
    <input type="button" name="Submit" value="添加参与人" onclick="AddSignRow()" />  
   <input type="button" name="Submit2" value="清空" onclick="ClearAllSign()" /> 
   <input name='txtTRLastIndex' type='hidden' id='txtTRLastIndex' value="1" /> 
  </div> 
 
</BODY> 
</HTML>

删除行 用下面的方法比较好……

<html> 
<head> 
<title>1</title> 
<script> 
//得到行对象 
function getRowObj(obj) 
{ 
var i = 0; 
while(obj.tagName.toLowerCase() != "tr"){ 
obj = obj.parentNode; 
if(obj.tagName.toLowerCase() == "table")return null; 
} 
return obj; 
} 
 
//根据得到的行对象得到所在的行数 
function getRowNo(obj){ 
var trObj = getRowObj(obj); 
var trArr = trObj.parentNode.children; 
for(var trNo= 0; trNo < trArr.length; trNo++){ 
if(trObj == trObj.parentNode.children[trNo]){ 
alert(trNo+1); 
} 
} 
} 
 
//删除行 
function delRow(obj){ 
var tr = this.getRowObj(obj); 
if(tr != null){ 
tr.parentNode.removeChild(tr); 
}else{ 
throw new Error("the given object is not contained by the table"); 
} 
} 
</script> 
</head> 
 
<body> 
<table border = "1"> 
<tr> 
<td>A<input type="button" value="A" onclick="getRowNo(this)">getRowNo<td> 
</tr> 
<tr> 
<td>B<input type="button" value="B" onclick="delRow(this)">delRow<td> 
</tr> 
<tr> 
<td>C<input type="button" value="C" onclick="getRowNo(this)">getRowNo</td> 
</tr> 
<tr> 
<td>D<input type="button" value="D" onclick="getRowNo(this)">getRowNo</td> 
</tr> 
</table> 
</body> 
<html>

以上就是小编为大家带来的js实现table添加行tr、删除行tr、清空行tr的简单实例全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
在你的网页中嵌入外部网页的方法
Apr 02 Javascript
datagrid框架的删除添加与修改
Apr 08 Javascript
javaScript中的this示例学习详解及工作原理
Jan 13 Javascript
最简单的JavaScript验证整数、小数、实数、有效位小数正则表达式
Apr 17 Javascript
JS中使用mailto实现将用户在网页中输入的内容传递到本地邮件客户端
Oct 08 Javascript
BootStrap Datetimepicker 汉化的实现代码
Feb 10 Javascript
js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前
Apr 27 Javascript
简述JS控制台的使用
Jul 15 Javascript
vue中使用 pako.js 解密 gzip加密字符串的方法
Jun 10 Javascript
turn.js异步加载实现翻书效果
Jul 25 Javascript
LayUI switch 开关监听 获取属性值、更改状态的方法
Sep 21 Javascript
Vue项目中如何封装axios(统一管理http请求)
May 02 Vue.js
js控制li的隐藏和显示实例代码
Oct 15 #Javascript
jquery控制页面的展开和隐藏实现方法(推荐)
Oct 15 #Javascript
JS常用函数和常用技巧小结
Oct 15 #Javascript
表单元素值获取方式js及java方式的简单实例
Oct 15 #Javascript
JS添加或修改控件的样式(Class)实现方法
Oct 15 #Javascript
原生JS实现的放大镜效果实例代码
Oct 15 #Javascript
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
Oct 15 #Javascript
You might like
PHP保留两位小数并且四舍五入及不四舍五入的方法
2013/09/22 PHP
PHP使用Redis替代文件存储Session的方法
2017/02/15 PHP
PHP里面把16进制的图片数据显示在html的img标签上(实现方法)
2017/05/02 PHP
ThinkPHP5.1表单令牌Token失效问题的解决
2019/03/22 PHP
分享8个Laravel模型时间戳使用技巧小结
2020/02/12 PHP
JS获取并操作iframe中元素的方法
2013/03/21 Javascript
Extjs 4.x 得到form CheckBox 复选框的值
2014/05/04 Javascript
js动态创建标签示例代码
2014/06/09 Javascript
Node.js模块封装及使用方法
2016/03/06 Javascript
详解JavaScript中基于原型prototype的继承特性
2016/05/05 Javascript
javascript设计模式之单体模式学习笔记
2017/02/15 Javascript
Vue列表页渲染优化详解
2017/07/24 Javascript
如何去除vue项目中的#及其ie9兼容性
2018/01/11 Javascript
js+html5实现手机九宫格密码解锁功能
2018/07/30 Javascript
javascript移动端 电子书 翻页效果实现代码
2019/09/07 Javascript
jquery实现垂直手风琴导航栏
2020/02/18 jQuery
vue瀑布流组件实现上拉加载更多
2020/03/10 Javascript
[02:25]DOTA2英雄基础教程 熊战士
2014/01/03 DOTA
[05:16]《大圣!大圣》——DOTA2新英雄齐天大圣配音李世宏老师专访
2016/12/13 DOTA
在Python操作时间和日期之asctime()方法的使用
2015/05/22 Python
Python使用Mechanize模块编写爬虫的要点解析
2016/03/31 Python
轻量级的Web框架Flask 中模块化应用的实现
2017/09/11 Python
Python+OpenCV人脸检测原理及示例详解
2020/10/19 Python
linecache模块加载和缓存文件内容详解
2018/01/11 Python
Python使用Pickle库实现读写序列操作示例
2018/06/15 Python
OpenCV+python手势识别框架和实例讲解
2018/08/03 Python
Python读取YAML文件过程详解
2019/12/30 Python
Pycharm Git 设置方法
2020/09/15 Python
美国猫狗药物和用品网站:PetCareRx
2017/01/05 全球购物
Draper James官网:知名演员瑞茜·威瑟斯彭所创品牌
2017/10/25 全球购物
会计电算化专业个人的自我评价
2013/11/24 职场文书
中学生爱国演讲稿
2014/09/05 职场文书
作风建设整改方案
2014/10/27 职场文书
母婴行业实体、电商模式全面解析
2019/08/01 职场文书
Nginx服务器添加Systemd自定义服务过程解析
2021/03/31 Servers
vue css 相对路径导入问题级踩坑记录
2022/06/05 Vue.js