<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>table 操作</title> <script src="jquery-1.8.3.min.js" type="text/javascript"></script> <script src="jquery.query-2.1.7.js" type="text/javascript"></script> <script> $(function(){ //var table=document.getElementById("table").rows.length;//得到table的长度，rows行数，从1开始 //var table=document.getElementById("table");//获得table对象 //添加一行：将在第一行中添加第二行 //var length=document.getElementById("table").rows.length; //table.insertRow(length); //通过id获取值 //var byId=document.getElementById("first").innerHTML; //alert(byId); //弹出：第一列第一个单元格 //获取table的id 获取指定行的列 //var byRow=document.getElementById("table").rows[0].cells[1].innerHTML;//这里的rows从0开始、cell从0开始 //alert(byRow);//弹出第一列第二个单元格 //动态修改某单元格 //document.getElementById("table").rows[0].cells[0].innerText="aaa";//给一行第一列赋值为aaa //遍历表格table //var tds=document.getElementById('table').getElementsByTagName('td'); //alert(tds.length);//弹出7 说明获取的td从1开始计算 //for(var i=0;i<tds.length;i++){ //alert(tds[i].innerText);//循环弹出table里的数据 //} //动态添加一个单元格 var Con=document.getElementById("table"); var len=document.getElementById("table").rows.length; var row = Con.insertRow(len); var cell = row.insertCell(0); cell.innerHTML = "aaaaa";//效果第二行第一列存在aaaaa }); </script> </head> <body> <table border="1" id="table"> <tr> <td id="first">第一列第一个单元格</td> <td>第一列第二个单元格</td> <td>第一列第三个单元格</td> <td>第一列第四个单元格</td> <td>第一列第五个单元格</td> <td>第一列第六个单元格</td> <td>第一列第七个单元格</td> </tr> </table> </body> </html>
虽然现在页面布局很少用到table标签，大部分用到div，据说div比table更好用，更好调样式
不过有时候不能避免会用到table，因为这个还是在某种情况下还是要用到的，既然会用到那就会要操作咯！