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 相关文章推荐
JavaScript中“+”的陷阱深刻理解
Dec 04 Javascript
jquery提取元素里的纯文本不包含span等里的内容
Sep 30 Javascript
Dojo Javascript 编程规范 规范自己的JavaScript书写
Oct 26 Javascript
jQuery实现拖动调整表格单元格大小的代码实例
Jan 13 Javascript
javascript验证邮件地址和MX记录的方法
Jun 16 Javascript
JavaScript获取并更改input标签name属性的方法
Jul 02 Javascript
javascript html5摇一摇功能的实现
Apr 19 Javascript
jQuery动态添加可拖动元素完整实例(附demo源码下载)
Jun 21 Javascript
jQuery中deferred对象使用方法详解
Jul 14 Javascript
vue页面离开后执行函数的实例
Mar 13 Javascript
vue中mint-ui的使用方法
Apr 04 Javascript
javascript实现电商放大镜效果
Nov 23 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 显示客户端IP与服务器IP的代码
2010/10/12 PHP
Thinkphp模板中截取字符串函数简介
2014/06/17 PHP
PHP PDOStatement对象bindpram()、bindvalue()和bindcolumn之间的区别
2014/11/20 PHP
PHP获取HTTP body内容的方法
2018/12/31 PHP
Laravel如何实现适合Api的异常处理响应格式
2020/06/14 PHP
js导出格式化的excel 实例方法
2013/07/17 Javascript
仿新浪微博登陆邮箱提示效果的js代码
2013/08/02 Javascript
sencha touch 模仿tabpanel导航栏TabBar的实例代码
2013/10/24 Javascript
JS获取当前日期和时间的简单实例
2013/11/19 Javascript
jquery根据name属性查找的小例子
2013/11/21 Javascript
jQuery预加载图片常用方法
2015/06/15 Javascript
Jquery和JS获取ul中li标签的实现方法
2016/06/02 Javascript
Bootstrap三种表单布局的使用方法
2016/06/21 Javascript
javascript简单实现等比例缩小图片的方法
2016/07/27 Javascript
总结Javascript中数组各种去重的方法
2016/10/04 Javascript
AngularJS中的DOM操作用法分析
2016/11/04 Javascript
NodeJS基础API搭建服务器详细过程记录
2017/04/01 NodeJs
JS的Ajax与后端交互数据的实例
2018/08/08 Javascript
微信小程序实现页面浮动导航
2019/01/28 Javascript
layui动态表头的实现代码
2019/08/22 Javascript
Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)
2020/03/23 Javascript
JavaScript中的this妙用实例分析
2020/05/09 Javascript
[02:19]DOTA选手解说齐贺岁
2018/02/11 DOTA
python pandas dataframe 按列或者按行合并的方法
2018/04/12 Python
Python数据结构之哈夫曼树定义与使用方法示例
2018/04/22 Python
python调用百度REST API实现语音识别
2018/08/30 Python
Python3.5 处理文本txt,删除不需要的行方法
2018/12/10 Python
python os.path.isfile()因参数问题判断错误的解决
2019/11/29 Python
Python3如何使用range函数替代xrange函数
2020/10/05 Python
python中类与对象之间的关系详解
2020/12/16 Python
css3实现针线缝合效果(图解步骤)
2013/02/04 HTML / CSS
美国男士西装打折店:Jos. A. Bank
2017/11/13 全球购物
社区食品安全实施方案
2014/03/28 职场文书
《将心比心》教学反思
2014/04/08 职场文书
感恩寄语大全
2014/04/11 职场文书
党风廉政建设心得体会
2019/05/21 职场文书