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 相关文章推荐
AngularJs实现ng1.3+表单验证
Dec 10 Javascript
Bootstrap入门书籍之(一)排版
Feb 17 Javascript
Angular的事件和表单详解
Dec 26 Javascript
详解JS异步加载的三种方式
Mar 07 Javascript
jquery拼接ajax 的json和字符串拼接的方法
Mar 11 Javascript
Vue中render方法的使用详解
Jan 26 Javascript
解决vue数组中对象属性变化页面不渲染问题
Aug 09 Javascript
vue实现点击选中,其他的不选中方法
Sep 05 Javascript
express启用https使用小记
May 21 Javascript
js实现页面多个日期时间倒计时效果
Jun 20 Javascript
原生js实现自定义滚动条
Jan 20 Javascript
几款主流好用的富文本编辑器(所见即所得常用编辑器)介绍
Mar 17 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设计模式 Visitor 访问者模式
2011/06/28 PHP
php 数组动态添加实现代码(最土团购系统的价格排序)
2011/12/30 PHP
fetchAll()与mysql_fetch_array()的区别详解
2013/06/05 PHP
php_screw安装使用教程(另一个PHP代码加密实现)
2014/05/29 PHP
PHP翻页跳转功能实现方法
2020/11/30 PHP
PHP简单实现生成txt文件到指定目录的方法
2016/04/25 PHP
PHP的PDO预处理语句与存储过程
2019/01/27 PHP
PHP调用全国天气预报数据接口查询天气示例
2019/02/20 PHP
jQuery jqgrid 对含特殊字符json 数据的 Java 处理方法
2011/01/01 Javascript
jquery基础教程之数组使用详解
2014/03/10 Javascript
5个可以帮你理解JavaScript核心闭包和作用域的小例子
2014/10/08 Javascript
详解nodejs微信公众号开发——1.接入微信公众号
2017/04/10 NodeJs
微信小程序图片宽100%显示并且不变形
2017/06/21 Javascript
node通过express搭建自己的服务器
2017/09/30 Javascript
vue2.0 自定义 饼状图 (Echarts)组件的方法
2018/03/02 Javascript
vue多级复杂列表展开/折叠及全选/分组全选实现
2018/11/05 Javascript
vue中子组件传递数据给父组件的讲解
2019/01/27 Javascript
Django实现的自定义访问日志模块示例
2017/06/23 Python
python+mongodb数据抓取详细介绍
2017/10/25 Python
python调用百度语音识别api
2018/08/30 Python
python3获取url文件大小示例代码
2019/09/18 Python
基于pytorch的lstm参数使用详解
2020/01/14 Python
详解在Python中使用Torchmoji将文本转换为表情符号
2020/07/27 Python
详解HTML5表单新增属性
2016/12/21 HTML / CSS
HTML5实现获取地理位置信息并定位功能
2015/04/25 HTML / CSS
使用phonegap进行本地存储的实现方法
2017/03/31 HTML / CSS
罗德与泰勒百货官网:Lord & Taylor
2016/08/12 全球购物
英国最大的网上药品商店:Chemist Direct
2017/12/16 全球购物
世界上最值得信赖的多日游在线市场:TourRadar
2018/07/20 全球购物
教师对学生的评语
2014/04/28 职场文书
企业文化口号
2014/06/12 职场文书
五四青年节的活动方案
2014/08/20 职场文书
党员对照检查材料整改措施思想汇报
2014/09/26 职场文书
2015年社区工作总结
2015/04/08 职场文书
浅析NIO系列之TCP
2021/06/15 Java/Android
http通过StreamingHttpResponse完成连续的数据传输长链接方式
2022/02/12 Python