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 相关文章推荐
jquery animate 动画效果使用说明
Nov 04 Javascript
Javascript 面向对象编程(coolshell)
Mar 18 Javascript
把jquery 的dialog和ztree结合实现步骤
Aug 02 Javascript
JavaScript限定复选框的选择个数示例代码
Aug 25 Javascript
js获取数组的最后一个元素
Apr 14 Javascript
js制作带有遮罩弹出层实现登录注册表单特效代码分享
Sep 05 Javascript
arcgis for js 修改infowindow样式的方法
Nov 02 Javascript
详解JavaScript的闭包、IIFE、apply、函数与对象
Dec 21 Javascript
微信小程序 九宫格实例代码
Jan 21 Javascript
javascript 的变量、作用域和内存问题
Apr 19 Javascript
vscode 开发Vue项目的方法步骤
Nov 25 Javascript
Vue+element+cookie记住密码功能的简单实现方法
Sep 20 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+MySQL 制作简单的留言本
2009/11/02 PHP
使用php实现下载生成某链接快捷方式的解决方法
2013/05/07 PHP
PHP使用ffmpeg给视频增加字幕显示的方法
2015/03/12 PHP
Thinkphp5 微信公众号token验证不成功的原因及解决方法
2017/11/12 PHP
常见效果实现之返回顶部(结合淡入、淡出、减速滚动)
2012/01/04 Javascript
javascript 基础篇1 什么是js 建立第一个js程序
2012/03/14 Javascript
等待指定时间后自动跳转或关闭当前页面的js代码
2013/07/09 Javascript
JQuery的$命名冲突详细解析
2013/12/28 Javascript
JS延迟加载加快页面打开速度示例代码
2013/12/30 Javascript
jquery 删除字符串最后一个字符的方法解析
2014/02/11 Javascript
js实现两点之间画线的方法
2015/05/12 Javascript
jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
2015/09/19 Javascript
JS实现带提示的星级评分效果完整实例
2015/10/30 Javascript
表单元素值获取方式js及java方式的简单实例
2016/10/15 Javascript
Bootstrop实现多级下拉菜单功能
2016/11/24 Javascript
详解vue之页面缓存问题(基于2.0)
2017/01/10 Javascript
浅谈Vue数据绑定的原理
2018/01/08 Javascript
Vue2 模板template的四种写法总结
2018/02/23 Javascript
使用Vue动态生成form表单的实例代码
2018/04/26 Javascript
Vue渲染过程浅析
2019/03/14 Javascript
vue项目前端错误收集之sentry教程详解
2019/05/27 Javascript
Vue v-bind动态绑定class实例方法
2020/01/15 Javascript
深入了解Vue动态组件和异步组件
2021/01/26 Vue.js
Python专用方法与迭代机制实例分析
2014/09/15 Python
基于Python数据可视化利器Matplotlib,绘图入门篇,Pyplot详解
2017/10/13 Python
50行Python代码实现人脸检测功能
2018/01/23 Python
Python cookbook(数据结构与算法)从字典中提取子集的方法示例
2018/03/22 Python
python中sys.argv函数精简概括
2018/07/08 Python
python学习--使用QQ邮箱发送邮件代码实例
2019/04/16 Python
keras的ImageDataGenerator和flow()的用法说明
2020/07/03 Python
微型企业创业投资计划书
2014/01/10 职场文书
大学生职业生涯规划书范文
2014/01/14 职场文书
电大本科自我鉴定
2014/02/05 职场文书
社区母亲节活动方案
2014/03/05 职场文书
小学教师个人工作总结2015
2015/04/20 职场文书
Oracle数据库中通用的函数实例详解
2022/03/25 Oracle