首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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的简单实例全部内容了，希望大家多多支持三水点靠木~

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

- Author -

jingxian

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Prototype使用指南之base.js
Jan 10 Javascript
JQuery模板插件 jquery.tmpl 动态ajax扩展
Nov 10 Javascript
jquery二级导航内容均分的原理及实现
Aug 13 Javascript
结合JQ1.9通过js正则判断各种浏览器版本的方法
Dec 30 Javascript
JavaScript利用构造函数和原型的方式模拟C#类的功能
Mar 06 Javascript
jQuery中removeData()方法用法实例
Dec 27 Javascript
JQuery validate插件Remote用法大全
May 15 Javascript
浅谈js for循环输出i为同一值的问题
Mar 01 Javascript
js中的触发事件对象event.srcElement与event.target详解
Mar 15 Javascript
微信小程序：数据存储、传值、取值详解
May 07 Javascript
详解如何搭建mpvue框架搭配vant组件库的小程序项目
May 16 Javascript
JavaScript生成随机验证码代码实例
Sep 28 Javascript
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
KVM(1) HashSet集合(1) click(1) Yolov5(1) 本地化存储(1) Jmerte(1) Set接口(1) 自定义组件(1) Vue(10) Storage(1)
You might like
无线电波是什么？它是怎样传输的？
2021/03/01 无线电
php数字运算验证码的实现代码
2015/07/30 PHP
javascript Ext JS 状态默认存储时间
2009/02/15 Javascript
Jquery ui css framework
2010/06/28 Javascript
jquery中获取id值方法小结
2013/09/22 Javascript
JS操作HTML自定义属性的方法
2015/02/10 Javascript
JS实现让网页背景图片斜向移动的方法
2015/02/25 Javascript
JavaScript数组各种常见用法实例分析
2015/08/04 Javascript
jQuery实现点击小图片淡入淡出显示大图片特效
2015/09/09 Javascript
Bootstrap教程JS插件滚动监听学习笔记分享
2016/05/18 Javascript
javascript 中的继承实例详解
2017/05/05 Javascript
Angular中支持SCSS的方法
2017/11/18 Javascript
微信小程序实现简单input正则表达式验证功能示例
2017/11/30 Javascript
node.js读取Excel数据（下载图片）的方法示例
2018/08/02 Javascript
微信小程序之事件交互操作实例分析
2018/12/03 Javascript
Vue之Mixins(混入)的使用方法
2019/09/24 Javascript
ES6中Promise的使用方法实例总结
2020/02/18 Javascript
Element Cascader 级联选择器的使用示例
2020/07/27 Javascript
原生JavaScript实现留言板
2021/01/10 Javascript
vue 递归组件的简单使用示例
2021/01/14 Vue.js
深入浅析ImageMagick命令执行漏洞
2016/10/11 Python
Python守护进程和脚本单例运行详解
2017/01/06 Python
如何基于python测量代码运行时间
2019/12/25 Python
Python3.7下安装pyqt5的方法步骤(图文)
2020/05/12 Python
Python字符串函数strip()原理及用法详解
2020/07/23 Python
通过代码实例了解Python sys模块
2020/09/14 Python
Python制作运行进度条的实现效果(代码运行不无聊)
2021/02/24 Python
CSS3实现简易版的刮刮乐效果
2016/09/27 HTML / CSS
利用CSS3参考手册和CSS3代码生成工具加速来学习网页制
2012/07/11 HTML / CSS
如何使用css3实现一个类在线直播的队列动画的示例代码
2020/06/17 HTML / CSS
代码中finally中的代码会不会执行
2012/02/06 面试题
应届生会计电算化求职信
2013/10/03 职场文书
留学自荐信
2013/10/10 职场文书
公司人力资源管理制度
2015/08/05 职场文书
深入浅析python3 依赖倒置原则(示例代码)
2021/07/09 Python
Golang获取List列表元素的四种方式
2022/04/20 Golang