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 相关文章推荐
基于jquery的inputlimiter 实现字数限制功能
May 30 Javascript
关于jquery input textare 事件绑定及用法学习
Apr 03 Javascript
在子窗口中关闭父窗口的一句代码
Oct 21 Javascript
jQuery实现点击图片翻页展示效果的方法
Feb 16 Javascript
使用console进行性能测试
Apr 27 Javascript
jQuery判断元素是否显示 是否隐藏的简单实现代码
May 19 Javascript
Angular使用ng-messages与PHP进行表单数据验证
Dec 28 Javascript
Easy UI动态树点击文字实现展开关闭功能
Sep 30 Javascript
手写简单的jQuery雪花飘落效果实例
Apr 22 jQuery
Vue中的v-for循环key属性注意事项小结
Aug 12 Javascript
vue 解决路由只变化参数页面组件不更新问题
Nov 05 Javascript
使用这 6个Vue加载动画库来减少我们网站的跳出率
May 18 Vue.js
扒一扒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输出汉字的函数的分析
2006/10/09 PHP
PHP正确配置mysql(apache环境)
2011/08/28 PHP
Laravel 5框架学习之用户认证
2015/04/09 PHP
mod_php、FastCGI、PHP-FPM等PHP运行方式对比
2015/07/02 PHP
PHP定义字符串的四种方式详解
2018/02/06 PHP
jquery实现勾选复选框触发事件给input赋值
2015/02/01 Javascript
简易的投票系统以及js刷票思路和方法
2015/04/07 Javascript
JS模拟实现Select效果代码
2015/09/24 Javascript
Jquery 垂直多级手风琴菜单附源码下载
2015/11/17 Javascript
vue.js事件处理器是什么
2017/03/20 Javascript
vue+express 构建后台管理系统的示例代码
2018/07/19 Javascript
vue 下列表侧滑操作实例代码详解
2018/07/24 Javascript
vue2 设置router-view默认路径的实例
2018/09/20 Javascript
vscode下的vue文件格式化问题
2018/11/28 Javascript
layer弹出层自适应高度,垂直水平居中的实现
2019/09/16 Javascript
原生javascript中this几种常见用法总结
2020/02/24 Javascript
[01:20:06]TNC vs VG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python中的字典使用分享
2016/07/31 Python
Python tkinter模块中类继承的三种方式分析
2017/08/08 Python
Python实现爬虫抓取与读写、追加到excel文件操作示例
2018/06/27 Python
Pandas读取MySQL数据到DataFrame的方法
2018/07/25 Python
pandas 空数据处理方法详解
2019/11/02 Python
django从后台返回html代码的实例
2020/03/11 Python
在Django中自定义filter并在template中的使用详解
2020/05/19 Python
Python类绑定方法及非绑定方法实例解析
2020/10/09 Python
在线学习西班牙语、法语或其他语言:Babbel.com
2018/02/07 全球购物
美国宠物美容和宠物用品购物网站:Cherrybrook
2018/12/07 全球购物
Myprotein丹麦官网:欧洲第一运动营养品牌
2019/04/15 全球购物
红旗团支部事迹材料
2014/01/27 职场文书
网络编辑职责
2014/03/01 职场文书
事业单位分类改革实施方案
2014/03/21 职场文书
2014年初级职称工作总结
2014/12/08 职场文书
逃课检讨书
2015/01/26 职场文书
文案策划岗位职责
2015/02/11 职场文书
《童年的发现》教学反思
2016/02/18 职场文书
利用Python多线程实现图片下载器
2022/03/25 Python