JavaScript-DOM操作表格

DOM操作表格的用途

DOM操作表格会在项目做数据展示的时候用到，其余地方使用并不多。

表格内容

    <table>
        <thead>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>脑残</td>
                <td>未知</td>
                <td>5</td>
            </tr>
            <tr>
                <td>2</td>
                <td>二狗</td>
                <td>未知</td>
                <td>8</td>
            </tr>
            <tr>
                <td>3</td>
                <td>人渣</td>
                <td>未知</td>
                <td>7</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="4">全是人</td>
            </tr>
        </tfoot>
    </table>

表格中的tbody是可以不写的，在浏览器解析的时候，会自动加上

建议写的时候写上tbody，向项目标准看齐

表格操作

• 获取表格头

                表格.tHead

                返回整个表格头，thead里的所有内容

                注意：一个表格里只能有一个表格头

• 获取表格主体

                表格.tBodies

                返回整个表格的主体内容，是一个数组

• 获取表格底部

                表格.tFoot

                返回表格的底部，tfoot里的所有内容

                注意：一个表格只有一个tfoot

• 获取表格行

                表格.rows/tHead.rows/tBodies.rows/tFoot.rows

                返回各自对应的行，是个数组

                注意：可以设置整个行的样式

• 获取表格的单元格

                行.cells

                返回这一行的所有单元格，是个数组

                注意：它不能对整个单元格进行操作，只能取到某一个单元格进行操作

    <script>
        window.onload = function () {
            var table = document.querySelector("table");

            var head = table.tHead;
            var tbody = table.tBodies;
            var foot = table.tFoot;

            head.style.background = 'red';
            tbody[0].style.background = 'pink';
            foot.style.background = 'black';

            head.rows[0].style.color = 'green';
            tbody[0].rows[2].style.color = '#f90';
            foot.rows[0].style.color = 'grey';

            head.rows[0].cells[0].style.fontSize = '30px';
            tbody[0].rows[0].cells[1].style.fontSize = '40px';
            foot.rows[0].cells[0].style.fontSize = '50px';


        }
    </script>

onload功能函数最后的括号后面使用分号是最佳实践（忘了添加，这里说一下。）