js 关于table的操作

html部分代码

<table id="tab" width="100%" border="1px">
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>男</td>
            <td><a href="javscript:;">删除</a></td>
        </tr>
        <tr>
            <td>2</td>
            <td>小美</td>
            <td>女</td>
            <td><a href="javscript:;">删除</a></td>
        </tr>
    </table>

在平时如果我们要获取”小美“的值,也许会这么写:

var oTab = document.getElementById("tab");
alert(document.getElementsByTagName("td")[5].innerHTML)

通过getByTagName来获取 值，但这种方法不易于维护，前面的结构会影响到后面的代码，如果前面增加了一个td，就会影响到后面的取值

你还可以通过操作子节点来获取值，你也许会这么写：先取到table节点，然后取到table下面的第一个tr，然后再取到tr下面的第一个td，这么写看起来没什么问题，但浏览器会直接报错，因为Table的结构是包含thead(表格头部 只能有一个)，tbody（表格正文 可以有多个），tfoot（表格尾部 只能有一个），如果代码里你没写tbody，浏览器会默认给你加上，因为只有一个tbody，所有浏览器就会报错，所以平时我们应该注意

alert(oTab.children[1].children[1].innerHTML);

table的结构我们可以写成这样

<table id="tab" width="100%" border="1px">
        <thead>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>男</td>
            <td><a href="javscript:;">删除</a></td>
        </tr>
        <tr>
            <td>2</td>
            <td>小美</td>
            <td>女</td>
            <td><a href="javscript:;">删除</a></td>
        </tr>
        </tbody>
    </table>

如果我们想要获取到“小美”的值，就应该写成这样

alert(oTab.children[1].children[1].children[1].innerHTML)

但这么写代码看起来就不太直观，js专门提供了操作table的方法
tHead: 表格头部
tBodies: 表格正文
tFoot: 表格尾部
rows： 行
cells ： 列

alert(oTab.tBodies[0].rows[1].cells[1].innerHTML)

这样写看起来就直观多了