编程 Javascript

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程序设计有所帮助。

- Author -

shichen2014

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

用JAVASCRIPT如何给&lt;textarea&gt;&lt;/textarea&gt;赋值

Apr 20 Javascript

JavaScript 对象模型执行模型

Dec 06 Javascript

jQuery1.5.1 animate方法源码阅读

Apr 05 Javascript

js 通用javascript函数库整理

Aug 14 Javascript

JavaScript indexOf方法入门实例（计算指定字符在字符串中首次出现的位置）

Oct 17 Javascript

Javascript无参数和有参数类继承问题解决方法

Mar 02 Javascript

jQuery插件Tooltipster实现漂亮的工具提示

Apr 12 Javascript

举例简介AngularJS的内部语言环境

Jun 17 Javascript

JS实现网站菜单拖拽移位效果的方法

Sep 24 Javascript

jquery实现具有嵌套功能的选项卡

Feb 12 Javascript

基于javascript实现样式清新图片轮播特效

Mar 30 Javascript

解决Vue.js由于延时显示了{{message}}引用界面的问题

Aug 25 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/12/29 PHP

php缓存技术详细总结

2013/08/07 PHP

IIS6.0 开启Gzip方法及PHP Gzip函数分享

2014/06/08 PHP

PHP使用flock实现文件加锁的方法

2015/07/01 PHP

Laravel使用scout集成elasticsearch做全文搜索的实现方法

2018/11/30 PHP

jQuery Ajax之$.get()方法和$.post()方法

2009/10/12 Javascript

javascript 基础篇2 数据类型，语句，函数

2012/03/14 Javascript

影响jQuery使用的14个方面

2014/09/01 Javascript

用原生JS获取CLASS对象(很简单实用)

2014/10/15 Javascript

jQuery拖拽插件gridster使用指南

2015/04/21 Javascript

Js制作点击输入框时默认文字消失的效果

2015/09/05 Javascript

javascript实现很浪漫的气泡冒出特效

2020/09/05 Javascript

字太多用...代替的方法（两种）

2017/03/15 Javascript

分析JS中this引发的bug

2017/12/12 Javascript

javascript数组拍平方法总结

2018/01/20 Javascript

JavaScript实现更换背景图片

2019/10/18 Javascript

vue h5移动端禁止缩放代码

2019/10/28 Javascript

JS倒计时两种实现方式代码实例

2020/07/27 Javascript

vue递归获取父元素的元素实例

2020/08/07 Javascript

基于element-ui对话框el-dialog初始化的校验问题解决

2020/09/11 Javascript

Python实现二分查找与bisect模块详解

2017/01/13 Python

Python利用Beautiful Soup模块搜索内容详解

2017/03/29 Python

Python将一个CSV文件里的数据追加到另一个CSV文件的方法

2018/07/04 Python

python 将字符串中的数字相加求和的实现

2019/07/18 Python

解决pyecharts运行后产生的html文件用浏览器打开空白

2020/03/11 Python

Django+python服务器部署与环境部署教程详解

2020/03/30 Python

Liu Jo西班牙官网：意大利服装品牌

2019/09/11 全球购物

上海天奕面试题笔试题

2015/04/19 面试题

javascript实现用户必须勾选协议实例讲解

2021/03/24 Javascript

品学兼优的大学生自我评价

2013/09/20 职场文书

解除劳动关系协议书2篇

2014/11/28 职场文书

2016年大学迎新晚会工作总结

2015/10/15 职场文书

班委竞选稿范文

2015/11/21 职场文书

排查并解决MySQL生产库内存使用率高的报警

2022/04/11 MySQL

Pandas 数据编码的十种方法

2022/04/20 Python

Linux磁盘管理方法介绍

2022/06/01 Servers