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每次Title显示不同的名言
Sep 25 Javascript
jQuery数组处理方法汇总
Jun 20 Javascript
jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)
Jan 24 Javascript
javascript中负数算术右移、逻辑右移的奥秘探索
Oct 17 Javascript
利用Js的console对象,在控制台打印调式信息测试Js的实现
Nov 26 Javascript
bootstrap table分页模板和获取表中的ID方法
Jan 10 Javascript
Angular-Ui-Router+ocLazyLoad动态加载脚本示例
Mar 02 Javascript
微信小程序动态添加分享数据
Jun 14 Javascript
JS设计模式之状态模式概念与用法分析
Feb 05 Javascript
vue新vue-cli3环境配置和模拟json数据的实例
Sep 19 Javascript
elementUI 动态生成几行几列的方法示例
Jul 11 Javascript
vue中进行微博分享的实例讲解
Oct 14 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使用codebase生成随机数
2014/03/25 PHP
PHP实现HTML生成PDF文件的方法
2014/11/07 PHP
php导入模块文件分享
2015/03/17 PHP
使用PHPExcel操作Excel用法实例分析
2015/03/26 PHP
php中关于socket的系列函数总结
2015/05/18 PHP
js输出列表实现代码
2010/09/12 Javascript
JavaScript自动设置IFrame高度的小例子
2013/06/08 Javascript
js读写cookie实现一个底部广告浮层效果的两种方法
2013/12/29 Javascript
javascript实现Table排序的方法
2015/05/15 Javascript
JS实现漂亮的淡蓝色滑动门效果代码
2015/09/23 Javascript
基于jquery实现轮播特效
2016/04/22 Javascript
动态加载js、css的实例代码
2016/05/26 Javascript
jquery 校验中国身份证号码实例详解
2017/04/11 jQuery
gulp教程_从入门到项目中快速上手使用方法
2017/09/14 Javascript
在vue中,v-for的索引index在html中的使用方法
2018/03/06 Javascript
jQuery 导航自动跟随滚动的实现代码
2018/05/30 jQuery
jQuery实现的简单获取索引功能示例
2018/06/04 jQuery
Vue项目中跨域问题解决方案
2018/06/05 Javascript
Python 2.7.x 和 3.x 版本的重要区别小结
2014/11/28 Python
Python读取Excel的方法实例分析
2015/07/11 Python
教你用Type Hint提高Python程序开发效率
2016/08/08 Python
python dict 字典 以及 赋值 引用的一些实例(详解)
2017/01/20 Python
Python与R语言的简要对比
2017/11/14 Python
Django rest framework实现分页的示例
2018/05/24 Python
浅谈PYTHON 关于文件的操作
2019/03/19 Python
基于Python安装pyecharts所遇的问题及解决方法
2019/08/12 Python
详解CSS3中字体平滑处理和抗锯齿渲染
2017/03/29 HTML / CSS
微信小程序“圣诞帽”的实现思路详解
2017/12/28 HTML / CSS
英国排名第一的LED灯泡网站:LED Bulbs
2019/09/03 全球购物
Java中有几种类型的流?JDK为每种类型的流提供了一些抽象类以供继承,请说出他们分别是哪些类
2012/02/06 面试题
心理健康心得体会
2014/01/02 职场文书
师德师风自我评价范文
2014/09/11 职场文书
学生党员批评与自我批评
2014/10/15 职场文书
项目战略合作意向书
2015/05/08 职场文书
辛德勒的名单观后感
2015/06/03 职场文书
主婚人致辞精选
2015/07/28 职场文书