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 相关文章推荐
表格 隔行换色升级版
Nov 07 Javascript
5秒后跳转效果(setInterval/SetTimeOut)
May 03 Javascript
js unicode 编码解析关于数据转换为中文的两种方法
Apr 21 Javascript
JavaScript控制两个列表框listbox左右交换数据的方法
Mar 18 Javascript
网页中JS函数自动执行常用三种方法
Mar 30 Javascript
JS实现图片延迟加载并淡入淡出效果的简单方法
Aug 25 Javascript
微信小程序 获取微信OpenId详解及实例代码
Oct 31 Javascript
Vue通过input筛选数据
Oct 26 Javascript
Vue.js学习笔记之修饰符详解
Jul 25 Javascript
使用electron制作满屏心特效的示例代码
Nov 27 Javascript
JavaScript 类的封装操作示例详解
May 16 Javascript
聊聊vue 中的v-on参数问题
Jan 29 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
分享一下贝贝成长进度的php代码
2012/09/14 PHP
php中strstr、strrchr、substr、stristr四个函数的区别总结
2014/09/22 PHP
php实现微信公众平台账号自定义菜单类
2014/12/02 PHP
php根据指定位置和长度获得子字符串的方法
2015/03/17 PHP
PHP自定义多进制的方法
2016/11/03 PHP
php-msf源码详解
2017/12/25 PHP
PHP给前端返回一个JSON对象的实例讲解
2018/05/31 PHP
laravel使用Faker数据填充的实现方法
2019/04/12 PHP
jQuery点击tr实现checkbox选中的方法
2013/03/19 Javascript
jquery对象和javascript对象即DOM对象相互转换
2014/08/07 Javascript
JavaScript实现更改网页背景与字体颜色的方法
2015/02/02 Javascript
js简单实现竖向tab选项卡的方法
2015/05/04 Javascript
javascript实现一个简单的弹出窗
2016/02/22 Javascript
浅析JS获取url中的参数实例代码
2016/06/14 Javascript
微信开发 微信授权详解
2016/10/21 Javascript
javascript基础知识之html5轮播图实例讲解(44)
2017/02/17 Javascript
JavaScript原生数组Array常用方法
2017/04/06 Javascript
详解使用vue脚手架工具搭建vue-webpack项目
2017/05/10 Javascript
Vue 中使用vue2-highcharts实现top功能的示例
2018/03/05 Javascript
三分钟学会用ES7中的Async/Await进行异步编程
2018/06/14 Javascript
在vue中实现点击选择框阻止弹出层消失的方法
2018/09/15 Javascript
原生JS实现简单的无缝自动轮播效果
2018/09/26 Javascript
详解webpack loader和plugin编写
2018/10/12 Javascript
理理Vue细节(推荐)
2019/04/16 Javascript
VSCode使用之Vue工程配置eslint
2019/04/30 Javascript
vue使用i18n实现国际化的方法详解
2019/09/05 Javascript
[02:55]DOTA2英雄基础教程 发条技师
2013/12/04 DOTA
[50:59]2018DOTA2亚洲邀请赛 4.7 总决赛 LGD vs Mineski第四场
2018/04/10 DOTA
200行自定义python异步非阻塞Web框架
2017/03/15 Python
python数据抓取分析的示例代码(python + mongodb)
2017/12/25 Python
快速实现一个简单的canvas迷宫游戏的示例
2018/07/04 HTML / CSS
日本食品网上商店:JaponShop.com
2017/11/28 全球购物
Java里面StringBuilder和StringBuffer有什么区别
2016/06/06 面试题
中专药剂专业应届毕的自我评价
2013/12/27 职场文书
交流会主持词
2015/07/02 职场文书
pytorch实现加载保存查看checkpoint文件
2022/07/15 Python