首页
所有分类
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 相关文章推荐
服务器安全设置的几个注册表设置
Jul 28 Javascript
ExtJS 2.0实用简明教程 之ExtJS版的Hello
Apr 29 Javascript
javascript 一些用法小结
Sep 11 Javascript
JS操作图片(增,删,改) 例子
Apr 17 Javascript
JavaScript全排列的六种算法 具体实现
Jun 29 Javascript
Javascript控制页面链接在新窗口打开具体方法
Aug 16 Javascript
解决Jquery load()加载GB2312页面时出现乱码的两种方案
Sep 10 Javascript
JavaScript使表单中的内容显示在屏幕上的方法
Jun 29 Javascript
JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)
Apr 05 Javascript
javascript实现多张图片左右无缝滚动效果
Mar 22 Javascript
巧用weui.topTips验证数据的实例
Apr 17 Javascript
JS中判断字符串存在和非空的方法
Sep 12 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
西班牙购物网站(115) 瑞士购物网站(28) 德国购物网站(227) 日本购物网站(72) 中国购物网站(172) 韩国购物网站(27) 加拿大购物网站(185) 马来西亚购物网站(41) 印度购物网站(45) 墨西哥购物网站(16)
You might like
php Smarty初体验二 获取配置信息
2011/08/08 PHP
php时间戳转换的示例
2014/03/31 PHP
php中header跳转使用include包含解决参数丢失问题
2015/05/08 PHP
php分割合并两个字符串的函数实例
2015/06/19 PHP
PHP实现留言板功能的详细代码
2017/03/25 PHP
php处理静态页面：页面设置缓存时间实例
2017/06/22 PHP
PHP基于pdo的数据库操作类【可支持mysql、sqlserver及oracle】
2018/05/21 PHP
PHP获取本周所有日期或者最近七天所有日期的方法
2018/06/20 PHP
jQuery 跨域访问问题解决方法
2009/12/02 Javascript
Js中的onblur和onfocus事件应用介绍
2013/08/27 Javascript
javasciprt下jquery函数$.post执行无响应的解决方法
2014/03/13 Javascript
JavaScript中的splice()方法使用详解
2015/06/09 Javascript
跟我学习javascript的this关键字
2020/05/28 Javascript
浅析JavaScript中浏览器的兼容问题
2016/04/19 Javascript
Ajax分页插件Pagination从前台jQuery到后端java总结
2016/07/22 Javascript
微信小程序picker组件下拉框选择input输入框的实例
2017/09/20 Javascript
详解Angular5 服务端渲染实战
2018/01/04 Javascript
vue实现简单loading进度条
2018/06/06 Javascript
小程序tab页无法传递参数的方法
2018/08/03 Javascript
微信小程序rich-text富文本用法实例分析
2019/05/20 Javascript
vue使用video插件vue-video-player的示例
2020/10/03 Javascript
python使用mysqldb连接数据库操作方法示例详解
2013/12/03 Python
Python实现栈的方法
2015/05/26 Python
python使用RNN实现文本分类
2018/05/24 Python
解决python os.mkdir创建目录失败的问题
2018/10/16 Python
在python 中split()使用多符号分割的例子
2019/07/15 Python
python中的RSA加密与解密实例解析
2019/11/18 Python
使用python的turtle绘画滑稽脸实例
2019/11/21 Python
PyTorch学习:动态图和静态图的例子
2020/01/06 Python
python GUI库图形界面开发之PyQt5日期时间控件QDateTimeEdit详细使用方法与实例
2020/02/27 Python
Python3+selenium配置常见报错解决方案
2020/08/28 Python
python Scrapy框架原理解析
2021/01/04 Python
HTTP状态码详解
2021/03/18 杂记
安全责任书模板
2014/07/22 职场文书
监理中标通知书
2015/04/16 职场文书
入党转正申请报告
2015/05/15 职场文书