JS动态添加Table的TR,TD实现方法
作者:bea
本文实例讲述了JS动态添加Table的TR,TD实现方法。分享给大家供大家参考。具体实现方法如下: 代码如下: <html> <head> <title></title> <SCRIPT language="JavaScript"> var tempRow=0; var maxRows=0; function insertRows(){ tempRow=table1.rows.leng
本文实例讲述了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程序设计有所帮助。
有用 | 无用
代码如下:
<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程序设计有所帮助。
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- AngularJS中的模块详解
- jquery结合CSS使用validate实现漂亮的验证
- 5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
- 推荐一个自己用的封装好的javascript插件
- js实现点击左右按钮轮播图片效果实例
- JavaScript中实现继承的三种方式和实例
- javascript面向对象程序设计(一)
- jquery调取json数据实现省市级联的方法
- JavaScript中实现单体模式分享
- angular简介和其特点介绍
- javascript实现获取浏览器版本、操作系统类型
- 浅谈javascript中自定义模版
- jQuery和AngularJS的区别浅析
- node.js中的forEach()是同步还是异步呢
- Node.js事件循环(Event Loop)和线程池详解
- 使用Sticker.js实现贴纸效果
- javascript实现瀑布流自适应遇到的问题及解决方案
- 7个让JavaScript变得更好的注意事项
- 简单谈谈javascript代码复用模式