JS动态添加Table的TR,TD实现方法


Posted in Javascript onJanuary 28, 2015

本文实例讲述了JS动态添加Table的TR,TD实现方法。分享给大家供大家参考。具体实现方法如下:

<html>  

<head> 

<title></title> 

<SCRIPT language="JavaScript"> 

var tempRow=0; 

var maxRows=0; 

function insertRows(){ 

tempRow=table1.rows.length-1; 

maxRows=tempRow; 

tempRow=tempRow+1; 

var Rows=table1.rows;//类似数组的Rows 

var newRow=table1.insertRow(table1.rows.length);//插入新的一行 

var Cells=newRow.cells;//类似数组的Cells 

for (i=0;i<2;i++)//每行的7列数据 

{ 

var newCell=Rows(newRow.rowIndex).insertCell(Cells.length); 

newCell.align="center"; 

switch (i) 

{ 

case 0: newCell.innerHTML="<td valign='top'>corpName</TD>"; break; 

case 1 : newCell.innerHTML="<td valign='top'><a href='javascript:delTableRow(\""+tempRow+"\")'>删除</a></TD>"; break; 

} 

} 

maxRows+=1; 

} 

function delTableRow(rowNum){ 

if (table1.rows.length >rowNum){ 

table1.deleteRow(rowNum); 

} 

} 

</SCRIPT> 

</head> 

<body> 

<form action=""> 

<table border="0" cellspacing="0" cellpadding="0" width="98%" align="center"> 

<tr valign="top"> 

<th> 

<input value="添加" type="button" onclick="insertRows()"> 

</th> 

</tr> 

</table> 

<br /> 

<table border="1" width="98%" align="center" id="table1"> 

<tr> 

<th >企业名称</th> 

<th>操作<th> 

</tr> 

</table> 

</form> 

</body> 

</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
javascript之锁定表格栏位
Jun 29 Javascript
JavaScript 克隆数组最简单的方法
Feb 12 Javascript
javascript在myeclipse中报错的解决方法
Oct 29 Javascript
javascript表格的渲染组件
Jul 03 Javascript
不间断循环滚动效果的实例代码(必看篇)
Oct 08 Javascript
jquery文字填写自动高度的实现方法
Nov 07 Javascript
jquery+ajax实现省市区三级联动效果简单示例
Jan 04 Javascript
canvas绘制的直线动画
Jan 23 Javascript
jQuery实现web页面樱花坠落的特效
Jun 01 jQuery
详解在Angular项目中添加插件ng-bootstrap
Jul 04 Javascript
微信小程序结合mock.js实现后台模拟及调试
Mar 28 Javascript
Vue Cli 3项目使用融云IM实现聊天功能的方法
Apr 19 Javascript
扒一扒JavaScript 预解释
Jan 28 #Javascript
javascript弹出页面回传值的方法
Jan 28 #Javascript
JS获得选取checkbox整行数据的方法
Jan 28 #Javascript
js获取checkbox值的方法
Jan 28 #Javascript
js树插件zTree获取所有选中节点数据的方法
Jan 28 #Javascript
浅谈javascript的调试
Jan 28 #Javascript
js的for in循环和java里foreach循环的区别分析
Jan 28 #Javascript
You might like
PHP调用Webservice实例代码
2011/07/29 PHP
phpmyadmin配置文件现在需要绝密的短密码(blowfish_secret)的2种解决方法
2014/05/07 PHP
js prototype截取字符串函数
2010/04/01 Javascript
javascript+mapbar实现地图定位
2010/04/09 Javascript
javascript 二分法(数组array)
2010/04/24 Javascript
在vs2010中调试javascript代码方法
2011/02/11 Javascript
Notify - 基于jquery的消息通知插件
2011/10/18 Javascript
javascript日期对象格式化为字符串的实现方法
2014/01/14 Javascript
javascript页面上使用动态时间具体实现
2014/03/18 Javascript
JavaScript实现存储HTML字符串示例
2014/04/21 Javascript
SyntaxHighlighter 3.0.83使用笔记
2015/01/26 Javascript
jquery实现未经美化的简洁TAB菜单效果
2015/08/28 Javascript
JS实现的鼠标跟随代码(卡通手型点击效果)
2015/10/26 Javascript
js实现点击图片自动提交action的简单方法
2016/10/16 Javascript
JavaScript定时器实现的原理分析
2016/12/06 Javascript
vue2.0.js的多级联动选择器实现方法
2018/02/09 Javascript
javascript变量提升和闭包理解
2018/03/12 Javascript
webpack4 CSS Tree Shaking的使用
2018/09/03 Javascript
bootstrap 日期控件 datepicker被弹出框dialog覆盖的解决办法
2019/07/09 Javascript
jQuery cookie的公共方法封装和使用示例
2020/06/01 jQuery
下载糗事百科的内容_python版
2008/12/07 Python
python的迭代器与生成器实例详解
2014/07/16 Python
python中的格式化输出用法总结
2016/07/28 Python
详解Django的CSRF认证实现
2018/10/09 Python
python爬虫获取新浪新闻教学
2018/12/23 Python
python多线程爬取西刺代理的示例代码
2021/01/30 Python
台湾最大银发乐活百货:乐龄网
2018/05/21 全球购物
后勤人员岗位职责
2013/12/17 职场文书
大学生个人先进事迹材料范文
2014/05/03 职场文书
法定代表人授权委托书范文
2014/08/02 职场文书
销售员工作检讨书(推荐篇)
2014/10/18 职场文书
2014年纠风工作总结
2014/12/08 职场文书
学术会议通知
2015/04/15 职场文书
创建文明城市倡议书
2015/04/28 职场文书
授权协议书范本(3篇)
2019/10/15 职场文书
浅谈JavaScript浅拷贝和深拷贝
2021/11/07 Javascript