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 相关文章推荐
图片img的src不变让浏览器重新加载实现方法
Mar 29 Javascript
js的Prototype属性解释及常用方法
May 08 Javascript
JavaScript中switch判断容易犯错的一个细节
Aug 27 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
Mar 21 Javascript
jquery实现图片随机排列的方法
May 04 Javascript
JS实现霓虹灯文字效果的方法
Aug 06 Javascript
实例讲解JavaScript中的this指向错误解决方法
Jun 13 Javascript
基于javascript实现按圆形排列DIV元素(三)
Dec 02 Javascript
js生成随机颜色方法代码分享(三种)
Dec 29 Javascript
JavaScript函数中的this四种绑定形式
Aug 15 Javascript
jQuery实现右侧抽屉式在线客服功能
Dec 25 jQuery
Openlayers实现地图的基本操作
Sep 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
将一维或多维的数组连接成一个字符串的php代码
2010/08/08 PHP
PHP如何读取由JavaScript设置的Cookie
2017/03/22 PHP
简洁短小的 JavaScript IE 浏览器判定代码
2010/03/21 Javascript
页面载入结束自动调用js函数示例
2013/09/23 Javascript
jquery mobile的触控点击事件会多次触发问题的解决方法
2014/05/08 Javascript
jQuery中使用each处理json数据
2015/04/23 Javascript
JavaScrip常见的一些算法总结
2015/12/28 Javascript
jquery通过name属性取值的简单实现方法
2016/06/20 Javascript
用jQuery向div中添加Html文本内容的简单实现
2016/07/13 Javascript
etmvc+jQuery EasyUI+combobox多值操作实现角色授权实例
2016/11/09 Javascript
RequireJS 依赖关系的实例(推荐)
2017/01/21 Javascript
详解微信小程序 相对定位和绝对定位
2017/05/11 Javascript
Angular网络请求的封装方法
2018/05/22 Javascript
JavaScript 中的12种循环遍历方法【总结】
2018/05/31 Javascript
react实现换肤功能的示例代码
2018/08/14 Javascript
vue组件之间通信实例总结(点赞功能)
2018/12/05 Javascript
vue和小程序项目中使用iconfont的方法
2020/05/19 Javascript
js 函数性能比较方法
2020/08/24 Javascript
JavaScript实现原型封装轮播图
2020/12/27 Javascript
[02:36]DOTA2英雄基础教程 一击致命幻影刺客
2013/12/06 DOTA
python下调用pytesseract识别某网站验证码的实现方法
2016/06/06 Python
Python获取某一天是星期几的方法示例
2017/01/17 Python
Python对象与引用的介绍
2019/01/24 Python
对django后台admin下拉框进行过滤的实例
2019/07/26 Python
如何使用Cython对python代码进行加密
2020/07/08 Python
python批量生成条形码的示例
2020/10/10 Python
Python中正则表达式对单个字符,多个字符和匹配边界等使用
2021/01/27 Python
HTML5之SVG 2D入门7—SVG元素的重用与引用
2013/01/30 HTML / CSS
实习教师个人的自我评价
2013/11/08 职场文书
医务工作者先进事迹材料
2014/01/26 职场文书
领导干部考察材料
2014/02/08 职场文书
美德少年事迹材料500字
2014/08/19 职场文书
群众路线调研报告范文
2014/11/03 职场文书
民事答辩状格式范文
2015/05/21 职场文书
Oracle创建只读账号的详细步骤
2021/06/07 Oracle
DjangoRestFramework 使用 simpleJWT 登陆认证完整记录
2021/06/22 Python