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 相关文章推荐
麻雀虽小五脏俱全 Dojo自定义控件应用
Sep 04 Javascript
E3 tree 1.6在Firefox下显示问题的修复方法
Jan 30 Javascript
JQuery的Ajax跨域请求原理概述及实例
Apr 26 Javascript
JS焦点图,JS 多个页面放多个焦点图的实例
Dec 08 Javascript
jQuery插件zTree实现的基本树与节点获取操作示例
Mar 08 Javascript
vue中引用阿里字体图标的方法
Feb 10 Javascript
jQuery 改变P标签文本值方法
Feb 24 jQuery
JavaScript实现图片懒加载的方法分析
Jul 05 Javascript
vue单文件组件lint error自动fix与styleLint报错自动fix详解
Jan 08 Javascript
vue中监听路由参数的变化及方法
Dec 06 Javascript
详解vue组件之间的通信
Aug 30 Javascript
vue下拉刷新组件的开发及slot的使用详解
Dec 23 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中用加号与用array_merge合并数组的区别深入分析
2013/06/03 PHP
ThinkPHP模板判断输出Empty标签用法详解
2014/06/30 PHP
PHP实用函数分享之去除多余的0
2015/02/06 PHP
浅析PHP关键词替换的类(避免重复替换,保留与还原原始链接)
2015/09/22 PHP
PHP MPDF中文乱码的解决方式
2015/12/08 PHP
Symfony2实现从数据库获取数据的方法小结
2016/03/18 PHP
javascript实现存储hmtl字符串示例
2014/04/25 Javascript
javascript的document.referrer浏览器支持、失效情况总结
2014/07/18 Javascript
escape函数解决js中ajax传递中文出现乱码问题
2014/10/30 Javascript
PHP+jQuery+Ajax实现多图片上传效果
2015/03/14 Javascript
论Bootstrap3和Foundation5网格系统的异同
2016/05/16 Javascript
Bootstrap模态框调用功能实现方法
2016/09/19 Javascript
关于RequireJS的简单介绍即使用方法
2016/10/20 Javascript
JavaScript函数柯里化原理与用法分析
2017/03/31 Javascript
微信小程序与php 实现微信支付的简单实例
2017/06/23 Javascript
详解解决Vue相同路由参数不同不会刷新的问题
2018/10/12 Javascript
vue分页插件的使用方法
2019/12/25 Javascript
详解element上传组件before-remove钩子问题解决
2020/04/08 Javascript
[10:05]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD 选手采访
2021/03/11 DOTA
Python模块WSGI使用详解
2018/02/02 Python
讲解Python3中NumPy数组寻找特定元素下标的两种方法
2019/08/04 Python
如何分离django中的媒体、静态文件和网页
2019/11/12 Python
pytorch:torch.mm()和torch.matmul()的使用
2019/12/27 Python
多视角3D可旋转的HTML5 Logo动画
2016/03/02 HTML / CSS
瑞典最大的儿童用品网上商店:pinkorblue.se
2021/03/09 全球购物
初一英语教学反思
2014/01/11 职场文书
村长反四风问题个人对照检查材料
2014/09/21 职场文书
对领导班子的意见和建议
2015/06/08 职场文书
女性健康知识讲座主持词
2015/07/04 职场文书
python 遍历磁盘目录的三种方法
2021/04/02 Python
浅谈JS和Nodejs中的事件驱动
2021/05/05 NodeJs
深入探讨opencv图像矫正算法实战
2021/05/21 Python
Python MNIST手写体识别详解与试练
2021/11/07 Python
利用python做数据拟合详情
2021/11/17 Python
python中的sys模块和os模块
2022/03/20 Python
Python+OpenCV实现在图像上绘制矩形
2022/03/21 Python