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 相关文章推荐
超清晰的document对象详解
Feb 27 Javascript
Javascript 构造函数 实例分析
Nov 26 Javascript
用JQuery 实现AJAX加载XML并解析的脚本
Jul 25 Javascript
javascript 使td内容不换行不撑开
Nov 29 Javascript
jquery实现个人中心导航菜单效果和美观都非常不错
Sep 02 Javascript
JQuery 两种方法解决刚创建的元素遍历不到的问题
Apr 13 Javascript
JavaScript数据结构之链表的实现
Mar 19 Javascript
vue 做移动端微信公众号采坑经验记录
Apr 26 Javascript
小程序tab页无法传递参数的方法
Aug 03 Javascript
详解ng-alain动态表单SF表单项设置必填和正则校验
Jun 11 Javascript
js blob类型url的视频下载问题的解决
Nov 29 Javascript
javascript实现贪吃蛇小练习
Jul 05 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
德劲1103二次变频版的打磨
2021/03/02 无线电
一步一步学习PHP(3) php 函数
2010/02/15 PHP
用PHP实现的四则运算表达式计算实现代码
2011/08/02 PHP
PHP速成大法
2015/01/30 PHP
php中header跳转使用include包含解决参数丢失问题
2015/05/08 PHP
javascript 表单的友好用户体现
2009/01/07 Javascript
jQuery 处理网页内容的实现代码
2010/02/15 Javascript
JS等比例缩小图片尺寸的实例
2013/02/27 Javascript
jQuery前端框架easyui使用Dialog时bug处理
2014/12/05 Javascript
快速掌握Node.js环境的安装与运行方法
2016/02/16 Javascript
JavaScript字符串对象(string)基本用法示例
2017/01/18 Javascript
jQuery Datatable 多个查询条件自定义提交事件(推荐)
2017/08/24 jQuery
vue用addRoutes实现动态路由的示例
2017/09/15 Javascript
jQuery发请求传输中文参数乱码问题的解决方案
2018/05/22 jQuery
微信小程序实现自上而下字幕滚动
2018/07/14 Javascript
vue 点击展开显示更多(点击收起部分隐藏)
2019/04/09 Javascript
JS apply用法总结和使用场景实例分析
2020/03/14 Javascript
[01:08:56]DOTA2-DPC中国联赛 正赛 Magma vs LBZS BO3 第一场 2月7日
2021/03/11 DOTA
分享Python文本生成二维码实例
2016/01/06 Python
django轻松使用富文本编辑器CKEditor的方法
2017/03/30 Python
详解Python中最难理解的点-装饰器
2017/04/03 Python
一篇文章读懂Python赋值与拷贝
2018/04/19 Python
Tensorflow分类器项目自定义数据读入的实现
2019/02/05 Python
使用Python发现隐藏的wifi
2020/03/04 Python
使用python+poco+夜神模拟器进行自动化测试实例
2020/04/23 Python
pycharm进入时每次都是insert模式的解决方式
2021/02/05 Python
canvas裁剪clip()函数的具体使用
2018/03/01 HTML / CSS
详解通过focusout事件解决IOS键盘收起时界面不归位的问题
2019/07/18 HTML / CSS
使用HTML5加载音频和视频的实现代码
2020/11/30 HTML / CSS
Julep官网:美容产品和指甲油
2017/02/25 全球购物
英国领先的运动物理治疗供应公司:Vivomed
2018/07/14 全球购物
西班牙美妆电商:Perfume’s Club(有中文站)
2018/08/08 全球购物
2014迎接教师节演讲稿
2014/09/10 职场文书
北京英文导游词
2015/02/12 职场文书
党员理论学习心得体会
2016/01/21 职场文书
Python读取文件夹下的所有文件实例代码
2021/04/02 Python