DOM12表格

最新推荐文章于 2021-08-21 03:24:58 发布

Kasekale

最新推荐文章于 2021-08-21 03:24:58 发布

阅读量169

点赞数

分类专栏： dom 文章标签： dom

本文链接：https://blog.csdn.net/Kasekale/article/details/78591862

版权

dom 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

        <table border="" id="box"> 
            <thead>
                <tr>
                    <th>头一</th>
                    <th>头二</th>
                    <th>头三</th>
                    <th>头四</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>内容一</td>
                    <td>内容二</td>
                    <td>内容三</td>
                    <td>内容四</td>
                </tr>
                <tr>
                    <td>内容一</td>
                    <td>内容二</td>
                    <td>内容三</td>
                    <td>内容四</td>
                </tr>
                <tr>
                    <td>内容一</td>
                    <td>内容二</td>
                    <td>内容三</td>
                    <td>内容四</td>
                </tr>
                <tr>
                    <td>内容一</td>
                    <td>内容二</td>
                    <td>内容三</td>
                    <td>内容四</td>
                </tr>
            </tbody>
            <tbody>
                <tr>
                    <td>内容一</td>
                    <td>内容二</td>
                    <td>内容三</td>
                    <td>内容四</td>
                </tr>
                <tr>
                    <td>内容一</td>
                    <td>内容二</td>
                    <td>内容三</td>
                    <td>内容四</td>
                </tr>
                <tr>
                    <td>内容一</td>
                    <td>内容二</td>
                    <td>内容三</td>
                    <td>内容四</td>
                </tr>
                <tr>
                    <td>内容一</td>
                    <td>内容二</td>
                    <td>内容三</td>
                    <td>内容四</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td>统计一</td>
                    <td>统计二</td>
                    <td>统计三</td>
                    <td>统计四</td>
                </tr>
            </tfoot>
        </table>

    <script>
        /*  table.tHead    -->     获取tHead 
            table.rows     -->     获取tr
            table.tBodies  -->     获取body集合
            cells是单元格  

        */
        var box = document.getElementById("box");
        box.tHead.style.borderColor = "red";
        console.log(box.rows);

        box.rows[1].style.backgroundColor ="pink";
        box.rows[2].style.backgroundColor ="greenYellow";
        box.rows[3].style.backgroundColor ="yellow";
        box.rows[4].style.backgroundColor ="blue";
        box.tBodies[0].style.background ="black";
        box.tBodies[1].style.background ="red";
        box.tFoot.style.backgroundColor="#ccc";
        box.tBodies[1].rows[1].cells[1].style.background="yellow";
    </script>
</body>
</html>

这里写图片描述

Kasekale

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM12表格

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <table border="" id="box"> <thead> <tr>
复制链接

扫一扫

专栏目录