js动态创建一个table表格代码实例下载

在实际应用中，可能需要动态创建一个表格，下面就分布介绍一下使用js如何创建一个表格。

一.insertRow()和insertCell()函数:

insertRow()函数可以插入一个行，语法格式如下:

[ 其他 ] 运行代码下载代码

<script>
insertRow(index)
</script>

参数index是从0开始的，规定新行在哪一行的前面插入新行，例如参数是1，就是在第二行的前面插入新行。

在默认情况下，参数是可以省略的，新行会被插入到表格的最后，相当于insertRow(-1)。

insertCell()函数用来插入一个单元格，的用法和insertRow()函数的用法是一个道理，这里就不多介绍了。

二.deleteRow()和deleteCell()函数:

deleteRow()函数可以删除指定的行，语法格式如下:

[ 其他 ] 运行代码下载代码

<script>
deleteRow(index)
</script>

参数index是规定要删除行的索引值，从0开始。

deleteCell()函数用来删除一个单元格，用法和deleteRow()一样，这里就不多介绍了。

三.设置行与单元格的属性:

可以使用setAttribute()函数设置行与单元格的属性。

完整代码实例如下:

[ 其他 ] 运行代码下载代码

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.51qianduan.com/" />
<title>51前端</title>
<script type="text/javascript"> 
var Count=false;
var NO=1; 
function addRow(obj){ 
  Count=!Count;  
  var newTr=obj.insertRow(obj.rows.length); 
  var newTd0=newTr.insertCell(); 
  var newTd1=newTr.insertCell(); 
  var newTd2=newTr.insertCell(); 
   
  if(Count){
    newTr.style.background="#FFE1FF";
  } 
  else {
    newTr.style.background="#FFEFD5";
  } 
  newTd0.innerHTML='<input type=checkbox />'; 
  NO++ 
  newTd1.innerText="第"+ NO+"行"; 
} 
window.onload=function(){
  var thetable=document.getElementById("thetable");
  var bt=document.getElementById("bt");
    
  bt.onclick=function(){addRow(thetable)}
}
</script>
</head>
<body>
<table width="399" cellspacing="1" id="thetable">
  <tr bgcolor="#FFEFD5">
    <td width=6%><input type=checkbox ></td>
    <td >第1行</td>
    <td ></td>
  </tr>
</table>
<input type="button" value="插入行" id="bt"/>
</body>
</html>

代码描述：js动态创建table表格。js动态创建一个table表格代码实例下载

下载全部收藏

151 201

用户评论

大牛，别默默的看了，快登录帮我点评一下吧！:) 登录 | 注册