首页
所有分类
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 相关文章推荐
JavaScript静态的动态
Sep 18 Javascript
JS 图片缩放效果代码
Jun 09 Javascript
DB.ASP 用Javascript写ASP很灵活很好用很easy
Jul 31 Javascript
javascript的内存管理详解
Aug 07 Javascript
最精简的JavaScript实现鼠标拖动效果的方法
May 11 Javascript
JavaScript中的继承之类继承
May 01 Javascript
实例解析angularjs的filter过滤器
Dec 14 Javascript
jQuery Validate让普通按钮触发表单验证的方法
Dec 15 Javascript
前端分页功能的实现以及原理（jQuery）
Jan 22 Javascript
关于vue.extend和vue.component的区别浅析
Aug 16 Javascript
vue-router路由与页面间导航实例解析
Nov 07 Javascript
原生js拖拽功能制作滑动条实例代码
Feb 05 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
Flask(2) Pytesseract(1) 裁剪图片(1) 验证码(1) 进度条(1) PIL(1) Python(3) 鲲鹏(1) 信号同步(1) GCN(1)
You might like
一个php短网址的生成代码(仿微博短网址)
2014/05/07 PHP
Thinkphp使用mongodb数据库实现多条件查询方法
2014/06/26 PHP
ThinkPHP中使用Ueditor富文本编辑器
2015/09/02 PHP
PHP实现可自定义样式的分页类
2016/03/29 PHP
PHP实现求解最长公共子串问题的方法
2017/11/17 PHP
javascript一个无懈可击的实例化XMLHttpRequest的方法
2010/10/13 Javascript
仿微博字符限制效果实现代码
2012/04/20 Javascript
简介JavaScript中Math.cos()余弦方法的使用
2015/06/15 Javascript
JQuery中ajax方法访问web服务实例
2015/07/18 Javascript
基于jQuery仿淘宝产品图片放大镜代码分享
2020/06/23 Javascript
JS实现获取剪贴板内容的方法
2016/06/21 Javascript
jquery与ajax获取特殊字符实例详解
2017/01/08 Javascript
Ionic2调用本地SQlite实例
2017/04/22 Javascript
Angular 4依赖注入学习教程之ClassProvider的使用（三）
2017/06/04 Javascript
Angular4实现动态添加删除表单输入框功能
2017/08/11 Javascript
微信小程序实现天气预报功能
2018/07/18 Javascript
Jquery的autocomplete插件用法及参数讲解
2019/03/12 jQuery
Vue数字输入框组件示例代码详解
2020/01/15 Javascript
原生js+canvas实现贪吃蛇效果
2020/08/02 Javascript
python引用DLL文件的方法
2015/05/11 Python
用Python计算三角函数之atan()方法的使用
2015/05/15 Python
详解Python3中yield生成器的用法
2015/08/20 Python
pyspark.sql.DataFrame与pandas.DataFrame之间的相互转换实例
2018/08/02 Python
解决python中画图时x,y轴名称出现中文乱码的问题
2019/01/29 Python
使用批处理脚本自动生成并上传NuGet包(操作方法)
2019/11/19 Python
解决python gdal投影坐标系转换的问题
2020/01/17 Python
win10从零安装配置pytorch全过程图文详解
2020/05/08 Python
Html5大文件断点续传实现方法
2015/12/05 HTML / CSS
优秀学生干部个人的自我评价
2013/10/04 职场文书
2014年圣诞节促销方案
2014/03/14 职场文书
车辆工程专业求职信
2014/06/14 职场文书
2016关于学习党章的心得体会
2016/01/15 职场文书
如何写好开幕词？
2019/06/24 职场文书
创业计划书之美甲店
2019/09/20 职场文书
Javascript之datagrid查询详解
2021/09/15 Javascript
Python实现视频自动打码的示例代码
2022/04/08 Python