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 相关文章推荐
加速IE的Javascript document输出的方法
Dec 02 Javascript
JavaScript正则表达式中的ignoreCase属性使用详解
Jun 16 Javascript
js父页面中使用子页面的方法
Jan 09 Javascript
js实现String.Fomat的实例代码
Sep 02 Javascript
node.js文件上传处理示例
Oct 27 Javascript
详解js中call与apply关键字的作用
Nov 21 Javascript
基于Three.js插件制作360度全景图
Nov 29 Javascript
jquery pagination分页插件使用详解(后台struts2)
Jan 22 Javascript
vue bootstrap小例子一枚
Jun 09 Javascript
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
Jun 17 Javascript
node中modules.exports与exports导出的区别
Jun 08 Javascript
微信小程序自定义弹出层效果
May 26 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
You might like
PHP执行Curl时报错提示CURL ERROR: Recv failure: Connection reset by peer的解决方法
2014/06/26 PHP
支持png透明图片的php生成缩略图类分享
2015/02/08 PHP
php版微信公众平台回复中文出现乱码问题的解决方法
2016/09/22 PHP
input的focus方法使用
2010/03/13 Javascript
图片在浏览器中底部对齐 解决方法之一
2011/11/30 Javascript
ajax异步刷新实现更新数据库
2012/12/03 Javascript
jQuery的控件及事件(输入控件及回车事件)使用示例
2013/07/25 Javascript
JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)
2015/01/13 Javascript
javascript动态修改Li节点值的方法
2015/01/20 Javascript
javascript+HTML5自定义元素播放焦点图动画
2016/02/21 Javascript
jquery form表单获取内容以及绑定数据
2016/02/24 Javascript
javascript创建含数字字母的随机字符串方法总结
2016/08/01 Javascript
javascript使用 concat 方法对数组进行合并的方法
2016/09/08 Javascript
JS获取html元素的标记名实现方法
2016/10/08 Javascript
基于jQuery实现顶部导航栏功能
2016/12/27 Javascript
JS实现简易刻度时钟示例代码
2017/03/11 Javascript
jQuery实现拼图小游戏(实例讲解)
2017/07/24 jQuery
微信小程序swiper组件用法实例分析【附源码下载】
2017/12/07 Javascript
vue element中axios下载文件(后端Python)
2019/05/10 Javascript
简单了解JavaScript sort方法
2019/11/25 Javascript
js属性对象的hasOwnProperty方法的使用
2021/02/05 Javascript
Python实现同时兼容老版和新版Socket协议的一个简单WebSocket服务器
2014/06/04 Python
总结python爬虫抓站的实用技巧
2016/08/09 Python
python实现机器学习之元线性回归
2018/09/06 Python
pyqt5 tablewidget 利用线程动态刷新数据的方法
2019/06/17 Python
详解如何减少python内存的消耗
2019/08/09 Python
Aosom西班牙:家具在线商店
2020/06/11 全球购物
关于赌博的检讨书
2014/01/24 职场文书
小学毕业感言500字
2014/02/28 职场文书
新春寄语大全
2014/04/09 职场文书
信用卡逾期证明示例
2014/09/13 职场文书
财政专业大学生职业生涯规划书
2014/09/17 职场文书
一年级语文上册复习计划
2015/01/17 职场文书
事业单位财务人员岗位职责
2015/04/14 职场文书
2016年过年放假安排通知
2015/08/18 职场文书
关于感恩的素材句子(38句)
2019/11/11 职场文书