DOM学习实用路线（12）——DOM表格相关操作

最新推荐文章于 2021-11-22 08:51:39 发布

溜_x_i_a_o_迪

最新推荐文章于 2021-11-22 08:51:39 发布

阅读量142

点赞数

分类专栏： Web前端原生JavaScript JS——DOM 文章标签： dom css javascript 前端 html5

本文链接：https://blog.csdn.net/u013946061/article/details/105439922

版权

原生JavaScript 同时被 3 个专栏收录

34 篇文章 0 订阅

订阅专栏

Web前端

32 篇文章 0 订阅

订阅专栏

JS——DOM

12 篇文章 0 订阅

订阅专栏

表格相关操作

常见基本操作：tBodies、tHead、tFoot、rows、cells

table.tHead 获取 tHead（表头）
table.tBodies 获取的就是 tbody
rows 获取行(tr)
cells 获取单元格 (th,td)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <table border="1" id="table" width="300">
        <thead>
            <tr>
                <th>11</th>
                <th>12</th>
                <th>23</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>21</td>
                <td>22</td>
                <td>23</td>
            </tr>
            <tr>
                <td>31</td>
                <td>32</td>
                <td>33</td>
            </tr>
            <tr>
                <td>41</td>
                <td>42</td>
                <td>43</td>
            </tr>
        </tbody>
        <tbody>
            <tr>
                <td>51</td>
                <td>52</td>
                <td>53</td>
            </tr>
            <tr>
                <td>61</td>
                <td>62</td>
                <td>63</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>71</td>
                <td>72</td>
                <td>73</td>
            </tr>
        </tfoot>
    </table>
<script>
{
    let table = document.querySelector("table");

    console.log(table.tHead);
    console.log(table.tFoot);
    console.log(table.tBodies);
    console.log(table.tBodies[0].rows[0].cells[0]); 
}    
</script>
</body>
</html>

在这里插入图片描述

（后续待补充）

溜_x_i_a_o_迪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM学习实用路线（12）——DOM表格相关操作

表格相关操作常见基本操作：tBodies、tHead、tFoot、rows、cellstable.tHead 获取 tHead（表头）table.tBodies 获取的就是 tbodyrows 获取行(tr)cells 获取单元格 (th,td)<!DOCTYPE html><html lang="en"><head> <me...
复制链接

扫一扫