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怎么终止程序return不行换jfslk
May 30 Javascript
Blocksit插件实现瀑布流数据无限( 异步)加载
Jun 20 Javascript
JS实现的4种数字千位符格式化方法分享
Mar 02 Javascript
jQuery Easyui实现左右布局
Jan 26 Javascript
JavaScript知识点总结(五)之Javascript中两个等于号(==)和三个等于号(===)的区别
May 31 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
Aug 10 Javascript
AngularJS2 与 D3.js集成实现自定义可视化的方法
Dec 01 Javascript
深入理解vue中slot与slot-scope的具体使用
Jan 26 Javascript
浅谈js获取ModelAndView值的问题
Mar 28 Javascript
浅谈vue项目如何打包扔向服务器
May 08 Javascript
手把手教你如何编译打包video.js
Dec 09 Javascript
Node实现搜索框进行模糊查询
Jun 28 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
gd库图片下载类实现下载网页所有图片的php代码
2012/08/20 PHP
调整PHP的性能
2013/10/30 PHP
php制作文本式留言板
2015/03/18 PHP
php等比例缩放图片及剪切图片代码分享
2016/02/13 PHP
JQuery扩展插件Validate—6 radio、checkbox、select的验证
2011/09/05 Javascript
jquery入门—选择器实现隔行变色实例代码
2013/01/04 Javascript
使用Grunt.js管理你项目的应用说明
2013/04/24 Javascript
Nodejs+express+html5 实现拖拽上传
2014/08/08 NodeJs
node.js中的forEach()是同步还是异步呢
2015/01/29 Javascript
基于jQuery创建鼠标悬停效果的方法
2015/03/07 Javascript
基于Jquery实现表单验证
2020/07/20 Javascript
jQuery动态星级评分效果实现方法
2015/08/06 Javascript
javascript实现显示和隐藏div方法汇总
2015/08/14 Javascript
微信小程序之ES6与事项助手的功能实现
2016/11/30 Javascript
详解Javascript数据类型的转换规则
2016/12/12 Javascript
JavaScript编写的网页小游戏,很给力
2017/08/18 Javascript
JSON创建键值对(key是中文或者数字)方式详解
2017/08/24 Javascript
微信小程序使用Promise简化回调
2018/02/06 Javascript
手挽手带你学React之React-router4.x的使用
2019/02/14 Javascript
Django+Vue实现WebSocket连接的示例代码
2019/05/28 Javascript
微信小程序wxml列表渲染原理解析
2019/11/27 Javascript
[54:54]Newbee vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
对python中的 os.mkdir和os.mkdirs详解
2018/10/16 Python
python的scipy实现插值的示例代码
2019/11/12 Python
python3实现elasticsearch批量更新数据
2019/12/03 Python
Python3 搭建Qt5 环境的方法示例
2020/07/16 Python
基于python实现MQTT发布订阅过程原理解析
2020/07/27 Python
Python爬虫爬取微信朋友圈
2020/08/06 Python
荷兰演唱会和体育比赛订票网站:viagogo荷兰
2018/04/08 全球购物
优秀教师主要事迹
2014/02/01 职场文书
企业管理毕业生求职信
2014/03/11 职场文书
施工员岗位职责
2014/03/16 职场文书
小学清明节活动总结
2014/07/04 职场文书
印刷技术专业自荐信
2014/09/18 职场文书
大学生考试作弊检讨书1000字
2014/10/14 职场文书
在ubuntu下安装go开发环境的全过程
2022/08/05 Golang