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 相关文章推荐
js同时按下两个方向键
Dec 01 Javascript
JS event使用方法详解
Apr 28 Javascript
javascript instanceof,typeof的区别
Mar 24 Javascript
子窗体与父窗体传值示例js代码
Aug 01 Javascript
jquery选择器之属性过滤选择器详解
Jan 27 Javascript
jQuery实现仿微软首页感应鼠标变化滑动窗口效果
Oct 08 Javascript
微信小程序 轮播图swiper详解及实例(源码下载)
Jan 11 Javascript
详解webpack es6 to es5支持配置
May 04 Javascript
jQuery滚动条美化插件nicescroll简单用法示例
Apr 18 jQuery
使用json-server简单完成CRUD模拟后台数据的方法
Jul 12 Javascript
ES6 Generator函数的应用实例分析
Jun 26 Javascript
vue项目中使用eslint+prettier规范与检查代码的方法
Jan 16 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笔试题
2009/08/04 PHP
php 函数使用方法与函数定义方法
2010/05/09 PHP
解析Linux下Varnish缓存的配置优化
2013/06/20 PHP
PHP中Http协议post请求参数
2015/11/02 PHP
PHP 中 var_export、print_r、var_dump 调试中的区别
2018/06/19 PHP
浅谈JavaScript中面向对象技术的模拟
2006/09/25 Javascript
jquery ajax 同步异步的执行 return值不能取得的解决方案
2012/01/08 Javascript
JavaScript 和 Java 的区别浅析
2013/07/31 Javascript
设置checkbox为只读(readOnly)的两种方式
2013/10/11 Javascript
Javascript定义类(class)的三种方法详解
2015/03/13 Javascript
javascript性能优化之DOM交互操作实例分析
2015/12/12 Javascript
Jquery实现的简单轮播效果【附实例】
2016/04/19 Javascript
BootStrap中Tab页签切换实例代码
2016/05/30 Javascript
AngularJs  Understanding Angular Templates
2016/09/02 Javascript
socket.io实现在线群聊功能
2017/04/07 Javascript
JS实现图片预加载之无序预加载功能代码
2017/05/12 Javascript
js判断节假日实例代码
2017/12/27 Javascript
Vue 前端实现登陆拦截及axios 拦截器的使用
2019/07/17 Javascript
原生js添加一个或多个类名的方法分析
2019/07/30 Javascript
java遇到微信小程序 &quot;支付验证签名失败&quot; 问题解决
2019/12/22 Javascript
vue 路由守卫(导航守卫)及其具体使用
2020/02/25 Javascript
Nuxt的路由动画效果案例
2020/11/06 Javascript
[47:50]Secret vs VP 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python中属性和描述符的正确使用
2016/08/23 Python
windows下安装Python和pip终极图文教程
2017/03/05 Python
Python numpy 常用函数总结
2017/12/07 Python
使用memory_profiler监测python代码运行时内存消耗方法
2018/12/03 Python
Django 响应数据response的返回源码详解
2019/08/06 Python
Python上下文管理器用法及实例解析
2019/11/11 Python
私有程序集与共享程序集有什么区别
2013/04/05 面试题
介绍一下Linux文件的记录形式
2013/09/29 面试题
文艺晚会主持词
2014/03/24 职场文书
新农村建设汇报材料
2014/08/15 职场文书
Python3.10的一些新特性原理分析
2021/09/15 Python
Go 语言中 20 个占位符的整理
2021/10/16 Golang
Python如何将list中的string转换为int
2022/07/15 Ruby