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中的作用域
Apr 07 Javascript
JS localStorage实现本地缓存的方法
Jun 22 Javascript
JS替换字符串中字符即替换全部而不是第一个
Jun 04 Javascript
jQuery中用dom操作替代正则表达式
Dec 29 Javascript
js点击按钮实现带遮罩层的弹出视频效果
Dec 19 Javascript
bootstrap中日历范围选择插件daterangepicker的使用详解
Apr 17 Javascript
karma+webpack搭建vue单元测试环境的方法示例
May 24 Javascript
element-ui 关于获取select 的label值方法
Aug 24 Javascript
Easyui 去除jquery-easui tab页div自带滚动条的方法
May 10 jQuery
微信小程序云开发使用方法新手初体验
May 16 Javascript
React+TypeScript+webpack4多入口配置详解
Aug 08 Javascript
浅谈Vue3.0之前你必须知道的TypeScript实战技巧
Sep 11 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的单引号和双引号 字符串效率
2009/05/27 PHP
php中获得视频时间总长度的另一种方法
2011/09/15 PHP
解决使用attachEvent函数时,this指向被绑定的元素的问题的方法
2007/08/13 Javascript
让innerText在firefox火狐和IE浏览器都能用的写法
2011/05/14 Javascript
javascript实现字符串反转的方法
2015/02/05 Javascript
jQuery的Scrollify插件实现滑动到页面下一节点
2015/07/05 Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
2015/09/14 Javascript
Vue.js框架路由使用方法实例详解
2017/08/25 Javascript
js获取html页面代码中图片地址的实现代码
2018/03/05 Javascript
vue2.0 中使用transition实现动画效果使用心得
2018/08/13 Javascript
JS 实现获取验证码 倒计时功能
2018/10/29 Javascript
微信小程序 拍照或从相册选取图片上传代码实例
2019/08/28 Javascript
细说webpack6 Babel的使用详解
2019/09/26 Javascript
[54:26]完美世界DOTA2联赛PWL S3 Forest vs Rebirth 第一场 12.10
2020/12/12 DOTA
详解Django通用视图中的函数包装
2015/07/21 Python
使用 Python 实现微信群友统计器的思路详解
2018/09/26 Python
nohup后台启动Python脚本,log不刷新的解决方法
2019/01/14 Python
python3 pygame实现接小球游戏
2019/05/14 Python
Tensorflow实现神经网络拟合线性回归
2019/07/19 Python
详解Matplotlib绘图之属性设置
2019/08/23 Python
Python3运算符常见用法分析
2020/02/14 Python
Python如何使用正则表达式爬取京东商品信息
2020/06/01 Python
简单的Python人脸识别系统
2020/07/14 Python
Pytorch 图像变换函数集合小结
2021/02/01 Python
中间件分为哪几类
2016/09/18 面试题
初中考试作弊检讨书
2014/02/01 职场文书
2014年开学第一课活动方案
2014/03/06 职场文书
办公室主任职责范本
2014/03/07 职场文书
自强之星事迹材料
2014/05/12 职场文书
公司副总经理任命书
2014/06/05 职场文书
银行柜员求职自荐书
2014/06/18 职场文书
城管执法人员纪律作风整顿思想汇报
2014/09/13 职场文书
公司员工安全协议书
2014/11/21 职场文书
实习班主任自我评价
2015/03/11 职场文书
机关干部正风肃纪心得体会
2016/01/15 职场文书
Mysql文件存储图文详解
2021/06/01 MySQL