Table 工具凑集(行与列从0开始计数)
cells[] 返回包含表格中所有单元格的一个数组。
rows[] 返回包含表格中所有行的一个数组。
tBodies[] 返回包含表格中所有tbody 的一个数组
针对<table>元素(行与列从0开始计数)
caption 指向<caption>元素(如果存在)
tBodies 指向<tbody>元素的凑集
tFoot 指向<tfoot>元素(如果存在)
tHead 指向<thead>元素(如果存在)
rows 表格中所有行的凑集
deleteRow(position) 删除指定位置上的行
insertRow(position) 在rows凑集中的指定位置插入一个新行
createCaption() 创建<caption>元素并将其放入表格中;//括号内不须要插入值
deleteCaption() 删除<caption>元素 //括号内不须要插入值
针对<tbody>元素(手册上没有)
rows <tbody>中所有行的凑集
deleteRows(position) 删除指定位置上的行 浏览器已不支持
insertRows(position) 在rows凑集中的指定位置插入一个新行 浏览器已不支持
针对<tr>元素
cells <tr>中所有单元格的凑集
deleteCell(position) 删除给定位置上的单元格
insertCell(position) 在cells凑集的给定位置上插入一个新的单元格
把稳：是否利用tBodies[0]属性, 将会影响所操作的行与列
而浏览器已经删除了deleteRows(position)、insertRows(position)方法, 统一利用deleteRow()、insertRow()方法
获取表格的数据:
实例1:
<html><head><meta charset="utf-8"><title>无标题文档</title><script>window.onload=function (){var oTab=document.getElementById('tab1');//alert(oTab.getElementsByTagName('tbody')[0].getElementsByTagName('tr')[1].getElementsByTagName('td')[1].innerHTML);alert(oTab.tBodies[0].rows[1].cells[1].innerHTML);alert(oTab.tBodies[0].rows.length); //返回值为:5 由于<tbody></tbody>标记内有5行alert(oTab.rows.length); //tBodies[0]可以省略, 但返回值为:6 由于<thead></thead>标记有1行, <tbody></tbody>标记内有5行};</script></head><body><table id="tab1" border="1" width="500"><thead> <!-- 只管没有<tr>标记, 但浏览器也认定算是一行 --><td>ID</td><td>姓名</td><td>年事</td></thead><tbody><tr><td>1</td><td>Blue</td><td>27</td></tr><tr><td>2</td><td>张三</td><td>23</td></tr><tr><td>3</td><td>李四</td><td>28</td></tr><tr><td>4</td><td>王五</td><td>25</td></tr><tr><td>5</td><td>张伟</td><td>24</td></tr></tbody></table></body></html>
动态添加表格:
<script language="javascript">window.onload=function(){var oTr = document.getElementById("member").insertRow(2); //插入一行var aText = new Array();aText[0] = document.createTextNode("fresheggs");aText[1] = document.createTextNode("W610");aText[2] = document.createTextNode("Nov 5th");aText[3] = document.createTextNode("Scorpio");aText[4] = document.createTextNode("1038818");for(var i=0;i<aText.length;i++){var oTd = oTr.insertCell(i);oTd.appendChild(aText[i]);}}</script>
修正单元格内容:
当表格建立了往后,可以通过HTML DOM属性直接对单元格进行引用,比较getElementById()、getElementsByTagName()等方法一个个探求要方便得多;
oTable.rows[i].cells[j]
<script language="javascript">window.onload=function(){var oTable = document.getElementById("member");oTable.rows[3].cells[4].innerHTML = "lost"; //修正单元格内容}</script>
动态删除表格:
<script language="javascript">window.onload=function(){var oTable = document.getElementById("member");oTable.deleteRow(2); //删除一行，后面的行号自动补齐oTable.rows[2].deleteCell(1); //删除一个单元格，后面的也自动补齐}</script>
动态删除表格的行
<script language="javascript">function myDelete(){var oTable = document.getElementById("member"); //经由测试,这是多余的语句//删除该行this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);}window.onload=function(){var oTable = document.getElementById("member");var oTd;//动态添加delete链接for(var i=1;i<oTable.rows.length;i++){oTd = oTable.rows[i].insertCell(5);oTd.innerHTML = "<a href='#'>delete</a>";oTd.firstChild.onclick = myDelete; //添加删除事宜}}</script>
删除表格的列(自定义函数)
<script language="javascript">function deleteColumn(oTable,iNum){//自定义删除列函数，即每行删除相应单元格for(var i=0;i<oTable.rows.length;i++)oTable.rows[i].deleteCell(iNum);}window.onload=function(){var oTable = document.getElementById("member");deleteColumn(oTable,2); //利用删除列的自定义函数}</script>
