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字符串拼接的效率问题
Dec 25 Javascript
JS获得浏览器版本和操作系统版本的例子
May 13 Javascript
自写的jQuery异步加载数据添加事件
May 15 Javascript
IE浏览器IFrame对象内存不释放问题解决方法
Aug 22 Javascript
js变量、作用域及内存详解
Sep 23 Javascript
JavaScript中的fontsize()方法使用详解
Jun 08 Javascript
js绘制圆形和矩形的方法
Aug 05 Javascript
javaScript+turn.js实现图书翻页效果实例代码
Feb 16 Javascript
本地搭建微信小程序服务器的实现方法
Oct 27 Javascript
vue 中swiper的使用教程
May 22 Javascript
jQuery的Ajax接收java返回数据方法
Aug 11 jQuery
vscode自定义vue模板的实现
Jan 27 Vue.js
扒一扒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通用分页类page.php[仿google分页]
2008/08/31 PHP
PHP IN_ARRAY 函数使用注意事项
2010/07/24 PHP
了解PHP的返回引用和局部静态变量
2015/06/04 PHP
PHP获取音频文件的相关信息
2015/06/22 PHP
Yii2前后台分离及migrate使用(七)
2016/05/04 PHP
CI框架常用经典操作类总结(路由,伪静态,分页,session,验证码等)
2016/11/21 PHP
js parentElement和offsetParent之间的区别
2010/03/23 Javascript
javascript数字格式化通用类 accounting.js使用
2012/08/24 Javascript
jcrop基本参数一览
2013/07/16 Javascript
jquery mobile动态添加元素之后不能正确渲染解决方法说明
2014/03/05 Javascript
底部悬浮通栏可以关闭广告位的实现方法
2016/06/01 Javascript
ES6中的数组扩展方法
2016/08/26 Javascript
简单几步实现返回顶部效果
2016/12/05 Javascript
vue结合Echarts实现点击高亮效果的示例
2018/03/17 Javascript
详解vue中点击空白处隐藏div的实现(用指令实现)
2018/04/19 Javascript
微信小程序实现美团菜单
2018/06/06 Javascript
抖音上用记事本编写爱心小程序教程
2019/04/17 Javascript
swiper4实现移动端导航切换
2020/10/16 Javascript
swiper实现异形轮播效果
2019/11/28 Javascript
详解JavaScript的this指向和绑定
2020/09/08 Javascript
[50:29]2014 DOTA2华西杯精英邀请赛 5 24 DK VS iG
2014/05/26 DOTA
Python程序退出方式小结
2017/12/09 Python
Python中%是什么意思?python中百分号如何使用?
2018/03/20 Python
python列表list保留顺序去重的实例
2018/12/14 Python
python通过安装itchat包实现微信自动回复收到的春节祝福
2020/01/19 Python
pytorch 使用加载训练好的模型做inference
2020/02/20 Python
python实现全排列代码(回溯、深度优先搜索)
2020/02/26 Python
如何利用Python动态模拟太阳系运转
2020/09/04 Python
python按照list中字典的某key去重的示例代码
2020/10/13 Python
用Python制作音乐海报
2021/01/26 Python
大学生职业规划书的范本
2014/02/18 职场文书
营销总经理岗位职责范本
2014/09/02 职场文书
假期安全教育广播稿
2014/10/04 职场文书
街道办残联2016年助残日活动总结
2016/04/01 职场文书
JavaScript控制台的更多功能
2021/04/28 Javascript
浅谈哪个Python库才最适合做数据可视化
2021/06/28 Python