<!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，因为这个还是在某种情况下还是要用到的，既然会用到那就会要操作咯！
时间： 2024-08-30 00:12:05