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 相关文章推荐
js判断输入是否为正整数、浮点数等数字的函数代码
Nov 17 Javascript
JavaScript高级程序设计阅读笔记(五) ECMAScript中的运算符(一)
Feb 27 Javascript
javascript实现完美拖拽效果
May 06 Javascript
JS实现超精简响应鼠标显示二级菜单代码
Sep 12 Javascript
JS日期格式化之javascript Date format
Oct 01 Javascript
jQuery实现标题有打字效果的焦点图代码
Nov 16 Javascript
Bootstrap每天必学之导航
Nov 26 Javascript
使用jQuery Mobile框架开发移动端Web App的入门教程
May 17 Javascript
全面解析Bootstrap中scrollspy(滚动监听)的使用方法
Jun 06 Javascript
vue-axios使用详解
May 10 Javascript
JavaScript实现时间表动态效果
Jul 15 Javascript
JavaScript框架Angular和React深度对比
Nov 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文件读写操作之文件读取方法详解
2011/01/13 PHP
利用php递归实现无限分类 格式化数组的详解
2013/06/08 PHP
php中错误处理操作实例分析
2019/08/23 PHP
不同浏览器对回车提交表单的处理办法
2010/02/13 Javascript
js function使用心得
2010/05/10 Javascript
JavaScript中关于indexOf的使用方法与问题小结
2010/08/05 Javascript
javascript从右边截取指定字符串的三种实现方法
2013/11/29 Javascript
js的隐含参数(arguments,callee,caller)使用方法
2014/01/28 Javascript
js实现DOM走马灯特效的方法
2015/01/21 Javascript
对Web开发中前端框架与前端类库的一些思考
2015/03/27 Javascript
jQuery()方法的第二个参数详解
2015/04/29 Javascript
jQuery仿天猫实现超炫的加入购物车
2015/05/04 Javascript
js去除浏览器默认底图的方法
2015/06/08 Javascript
基于angularjs实现图片放大镜效果
2016/08/31 Javascript
微信小程序 教程之引用
2016/10/18 Javascript
使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
2017/03/15 Javascript
jQuery事件对象的属性和方法详解
2017/09/09 jQuery
node.js学习之事件模块Events的使用示例
2017/09/28 Javascript
vue自定义全局共用函数详解
2018/09/18 Javascript
Vue中插入HTML代码的方法
2018/09/21 Javascript
JS函数节流和防抖之间的区分和实现详解
2019/01/11 Javascript
微信小程序swiper组件实现抖音翻页切换视频功能的实例代码
2020/06/24 Javascript
[02:44]DOTA2英雄基础教程 钢背兽
2013/12/19 DOTA
Python的另外几种语言实现
2015/01/29 Python
详解Django定时任务模块设计与实践
2019/07/24 Python
详解Python修复遥感影像条带的两种方式
2020/02/23 Python
html5+css3实现一款注册表单实例
2013/04/17 HTML / CSS
html5实现移动端适配完美写法
2017/11/16 HTML / CSS
茱莉蔻美国官网:Jurlique美国
2020/11/24 全球购物
六道php面试题附答案
2014/06/05 面试题
防邪知识进家庭活动方案
2014/08/26 职场文书
如何写股份合作协议书
2014/09/11 职场文书
大学生简历自我评价2015
2015/03/03 职场文书
电影雷锋观后感
2015/06/10 职场文书
礼貌问候语大全
2015/11/10 职场文书
2016党性教育学习心得体会
2016/01/21 职场文书