前端学习笔记之——表格元素

表格元素

1、生成基本的表格

有三个元素是每个表格都必须要有的:table、tr 和 td。

元素table
元素类型
允许具备的父元素任何可以包含流元素的元素
局部属性border
内容caption、colgroup、thead、tbody、tfoot、tr、th 和 td 元素
标签用法开始标签和结束标签
习惯样式table { display: table; border-collapse: separate;
border-spacing: 2px; border-color: gray; }

下一个核心表格元素是 tr,它表示表格中的行。HTML 表格基于行而不是列,每个行必须分别标记。

元素tr
元素类型
允许具备的父元素table、thead、tfoot 和 tbody 元素
局部属性
内容一个或多个 td 或 th 元素
标签用法开始标签和结束标签
习惯样式tr { display: table-row; vertical-align: inherit;
border-color: inherit;}

三个核心元素中的最后一个是 td,它表示表格中的单元格

元素td
元素类型
允许具备的父元素tr 元素
局部属性colspan、rowspan、headers
内容流内容
标签用法开始标签和结束标签
习惯样式td { display: table-cell; vertical-align: inherit; }
<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    </head>
    <body>
        <table>
            <tr>
                <td>Apples</td>
                <td>Green</td>
                <td>Medium</td>
            </tr>
            <tr>
                <td>Oranges</td>
                <td>Orange</td>
                <td>Large</td>
            </tr>
        </table>
    </body>
</html>

此例定义了一个两行(分别由两个 tr 元素表示)的表格。每行有三列,一个 td 元素代表一列。td 元素可以包含任何流内容,但本例只使用了文字。

浏览器会调整行与列的尺寸以维持表格的形式。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    </head>
    <body>
        <table>
            <tr>
                <td>Apples</td>
                <td>Green</td>
                <td>Medium</td>
            </tr>
            <tr>
                <td>Oranges</td>
                <td>Orange</td>
                <td>Large</td>
            </tr>
            <tr>
                <td>Pomegranate</td>
                <td>A kind of greeny-red</td>
                <td>Varies from medium to large</td>
            </tr>
        </table>
    </body>
</html>

2、添加表头单元格

th 元素表示表头的单元格,它可以用来区分数据和对数据的说明

元素th
元素类型
允许具备的父元素tr 元素
局部属性colspan、rowspan、scope 和 headers
内容短语内容
标签用法开始标签和结束标签
习惯样式th { display: table-cell; vertical-align: inherit;
font-weight: bold; text-align: center; }
<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    </head>
    <body>
        <table>
            <tr>
                <th>Rank</th><th>Name</th>
                <th>Color</th><th>Size</th>
            </tr>
            <tr>
                <th>Favorite:</th>
                <td>Apples</td><td>Green</td><td>Medium</td>
            </tr>
            <tr>
                <th>2nd Favorite:</th>
                <td>Oranges</td><td>Orange</td><td>Large</td>
            </tr>
            <tr>
                <th>3rd Favorite:</th>
                <td>Pomegranate</td><td>A kind of greeny-red</td>
                <td>Varies from medium to large</td>
            </tr>
        </table>
    </body>
</html>

3、为表格添加结构

在设置表格样式的时候就会发现,要区别全是 th 元素的行中的 th 元素和与数据单元格混在一行中的 th 元素并不容易。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
        <style>
            tr > th { text-align:left; background:grey; color:white}
            tr > th:only-of-type {text-align:right; background: lightgrey; color:grey}
        </style>
    </head>
    <body>
        <table>
            <tr>
                <th>Rank</th><th>Name</th><th>Color</th><th>Size</th>
            </tr>
            <tr>
                <th>Favorite:</th><td>Apples</td><td>Green</td><td>Medium</td>
            </tr>
            <tr>
                <th>2nd Favorite:</th><td>Oranges</td><td>Orange</td><td>Large</td>
            </tr>
            <tr>
                <th>3rd Favorite:</th><td>Pomegranate</td><td>A kind of greeny-red</td>
                <td>Varies from medium to large</td>
            </tr>
        </table>
    </body>
</html>

此例使用了两个选择器。一个选择器匹配所有 th 元素,另一个只匹配 tr 元素的子元素中唯一的 th 元素。

要想灵活处理这个问题,可以使用 thead、tbody 和 tfoot 元素。

3.1、表示表头和表格主题

tbody 元素表示构成表格主体的全体行——不包括表头行和表脚行(它们分别由 thead 和 tfoot 元素表示)。

元素tbody
元素类型
允许具备的父元素table 元素
局部属性
内容零个或多个 tr 元素
标签用法开始标签和结束标签
习惯样式tbody { display: table-row-group;
vertical-align: middle; border-color: inherit; }

thead 元素用来标记表格的标题行

元素thead
元素类型
允许具备的父元素table 元素
局部属性
内容零个或多个 tr 元素
标签用法开始标签和结束标签
习惯样式thead { display: table-header-group;
vertical-align: middle; border-color: inherit; }

如果没有 thead 元素的话,所有 tr 元素都会被视为表格主体的一部分。下面代码在示例表格中添加了 thead 和 tbody 元素,并且相应地使用了更为灵活的 CSS 选择器。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
        <style>
            thead th { text-align:left; background:grey; color:white}
            tbody th { text-align:right; background: lightgrey; color:grey}
        </style>
    </head>
    <body>
        <table>
            <thead>
                <tr>
                    <th>Rank</th><th>Name</th><th>Color</th><th>Size</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>Favorite:</th><td>Apples</td><td>Green</td><td>Medium</td>
                </tr>
                <tr>
                    <th>2nd Favorite:</th><td>Oranges</td><td>Orange</td><td>Large</td>
                </tr>
                <tr>
                    <th>3rd Favorite:</th><td>Pomegranate</td>
                    <td>A kind of greeny-red</td><td>Varies from medium to large</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

3.2、添加表脚

tfoot 元素用来标记组成表脚的行

元素tfoot
元素类型
允许具备的父元素table 元素
局部属性
内容零个或多个 tr 元素
标签用法开始标签和结束标签
习惯样式tfoot { display: table-footer-group;
vertical-align: middle; border-color: inherit; }
<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
        <style>
            thead th, tfoot th { text-align:left; background:grey; color:white}
            tbody th { text-align:right; background: lightgrey; color:grey}
        </style>
    </head>
    <body>
        <table>
            <thead>
                <tr>
                    <th>Rank</th><th>Name</th><th>Color</th><th>Size</th>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <th>Rank</th><th>Name</th><th>Color</th><th>Size</th>
                </tr>                
            </tfoot>
            <tbody>
                <tr>
                    <th>Favorite:</th><td>Apples</td><td>Green</td><td>Medium</td>
                </tr>
                <tr>
                    <th>2nd Favorite:</th><td>Oranges</td><td>Orange</td><td>Large</td>
                </tr>
                <tr>
                    <th>3rd Favorite:</th><td>Pomegranate</td>
                    <td>A kind of greeny-red</td><td>Varies from medium to large</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

4、制作不规则表格

不规则表格要用到 td 和 th 元素中的 colspan 和 rowspan 属性。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
        <style>
            thead th, tfoot th { text-align:left; background:grey; color:white}
            tbody th { text-align:right; background: lightgrey; color:grey}
            [colspan], [rowspan] {font-weight:bold; border: medium solid black}
            thead [colspan], tfoot [colspan] {text-align:center; }
        </style>
    </head>
    <body>
        <table>
            <thead>
                <tr>
                    <th>Rank</th><th>Name</th><th>Color</th>
                    <th colspan="2">Size & Votes</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>Favorite:</th><td>Apples</td><td>Green</td>
                    <td>Medium</td><td>500</td>
                </tr>
                <tr>
                    <th>2nd Favorite:</th><td>Oranges</td><td>Orange</td>
                    <td>Large</td><td>450</td>
                </tr>
                <tr>
                    <th>3rd Favorite:</th><td>Pomegranate</td>
                    <td colspan="2" rowspan="2">
                        Pomegranates and cherries can both come in a range of colors 
                        and sizes. 
                    </td>
                    <td>203</td>
                </tr>
                <tr>
                    <th rowspan="2">Joint 4th:</th>
                    <td>Cherries</td>
                    <td rowspan="2">75</td>
                </tr>
                <tr>
                    <td>Pineapple</td>
                    <td>Brown</td>
                    <td>Very Large</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <th colspan="5">&copy; 2011 Adam Freeman Fruit Data Enterprises</th>
                </tr>                
            </tfoot>
        </table>
    </body>
</html>

想要一个单元格纵跨多行要用 rowspan 属性,为该属性设置的值就是所跨行数。同样,想让一个单元格横跨多列要用 colspan 属性。

colspan 和 rowspan 属性应该用在要占据的网格左上角那个单元格上。正常情况下位于它所跨越的位置上的 td 和 th 元素此时则被省略


5、把表头与单元格关联起来

td 和 th 元素都定义了 header 属性,它可以供屏幕阅读器和其他残障辅助技术用来简化对表格的处理。header 属性的值可被设置为一个或多个 th 单元格的 id 属性值。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
        <style>
            thead th, tfoot th { text-align:left; background:grey; color:white}
            tbody th { text-align:right; background: lightgrey; color:grey}
            thead [colspan], tfoot [colspan] {text-align:center; }
        </style>
    </head>
    <body>
        <table>
            <thead>
                <tr>
                    <th id="rank">Rank</th>
                    <th id="name">Name</th>
                    <th id="color">Color</th>
                    <th id="sizeAndVotes" colspan="2">Size & Votes</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th id="first" headers="rank">Favorite:</th>
                    <td headers="name first">Apples</td>
                    <td headers="color first">Green</td>
                    <td headers="sizeAndVote first">Medium</td>
                    <td headers="sizeAndVote first">500</td>
                </tr>
                <tr>
                    <th id="second" headers="rank">2nd Favorite:</th>
                    <td headers="name second">Oranges</td>
                    <td headers="color second">Orange</td>
                    <td headers="sizeAndVote second">Large</td>
                    <td headers="sizeAndVote second">450</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <th colspan="5">&copy; 2011 Adam Freeman Fruit Data Enterprises</th>
                </tr>                
            </tfoot>
        </table>
    </body>
</html>

此例为 thead 和 tbody 中的每一个 th 元素都设置了全局 id 属性值。tbody 中的每一个 td 和 th 元素都通过设置 header 属性将相应单元格与列表头关联起来。其中 td 元素还指定了所关联的行表头(出现在第一列中的表头)。


6、为表格添加标题

caption 元素可以用来为表格定义一个标题并将其余表格关联起来

元素caption
元素类型
允许具备的父元素table 元素
局部属性
内容流内容(但不能是 table 元素)
标签用法开始标签和结束标签
习惯样式caption { display: table-caption; text-align: center; }
<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
        <style>
            thead th, tfoot th { text-align:left; background:grey; color:white}
            tbody th { text-align:right; background: lightgrey; color:grey}
            [colspan], [rowspan] {font-weight:bold; border: medium solid black}
            thead [colspan], tfoot [colspan] {text-align:center; }
            caption {font-weight: bold; font-size: large; margin-bottom:5px}
        </style>
    </head>
    <body>
        <table>
            <caption>Results of the 2011 Fruit Survey</caption>
            <thead>
                <tr>
                    <th>Rank</th><th>Name</th><th>Color</th>
                    <th colspan="2">Size & Votes</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>Favorite:</th><td>Apples</td><td>Green</td>
                    <td>Medium</td><td>500</td>
                </tr>
                <tr>
                    <th>2nd Favorite:</th><td>Oranges</td><td>Orange</td>
                    <td>Large</td><td>450</td>
                </tr>
                <tr>
                    <th>3rd Favorite:</th><td>Pomegranate</td>
                    <td colspan="2" rowspan="2">
                        Pomegranates and cherries can both come in a range of colors 
                        and sizes. 
                    </td>
                    <td>203</td>
                </tr>
                <tr>
                    <th rowspan="2">Joint 4th:</th>
                    <td>Cherries</td>
                    <td rowspan="2">75</td>
                </tr>
                <tr>
                    <td>Pineapple</td>
                    <td>Brown</td>
                    <td>Very Large</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <th colspan="5">&copy; 2011 Adam Freeman Fruit Data Enterprises</th>
                </tr>                
            </tfoot>
        </table>
    </body>
</html>

一个表格只能包含一个 caption 元素。它不必是表格的第一个子元素,但是无论定义在什么位置,它总会显示在表格的正上方。


7、处理列

HTML 中的表格是基于行的。单元格的定义都要放在 tr 元素,而表格则是一行一行地组建出来的。因此对列应用样式有点不方便,对于包含不规则单元格的表格更是如此。这个问题的解决方法是使用 colgroup 和 col 元素。colgroup 代表一列

元素colgroup
元素类型
允许具备的父元素table 元素
局部属性span
内容零个或多个 col 元素(只能未设置 span 属性时才能使用)
标签用法开始标签和结束标签
习惯样式colgroup { display: table-column-group; }
<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
        <style>
            thead th, tfoot th { text-align:left; background:grey; color:white}
            tbody th { text-align:right; background: lightgrey; color:grey}
            [colspan], [rowspan] {font-weight:bold; border: medium solid black}
            thead [colspan], tfoot [colspan] {text-align:center; }
            caption {font-weight: bold; font-size: large; margin-bottom:5px}
            #colgroup1 {background-color: red}
            #colgroup2 {background-color: green; font-size:small}
        </style>
    </head>
    <body>
        <table>
            <caption>Results of the 2011 Fruit Survey</caption>
            <colgroup id="colgroup1" span="3"/>
            <colgroup id="colgroup2" span="2"/>
            <thead>
                <tr>
                    <th>Rank</th><th>Name</th><th>Color</th>
                    <th colspan="2">Size & Votes</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>Favorite:</th><td>Apples</td><td>Green</td>
                    <td>Medium</td><td>500</td>
                </tr>
                <tr>
                    <th>2nd Favorite:</th><td>Oranges</td><td>Orange</td>
                    <td>Large</td><td>450</td>
                </tr>
                <tr>
                    <th>3rd Favorite:</th><td>Pomegranate</td>
                    <td colspan="2" rowspan="2">
                        Pomegranates and cherries can both come in a range of colors 
                        and sizes. 
                    </td>
                    <td>203</td>
                </tr>
                <tr>
                    <th rowspan="2">Joint 4th:</th>
                    <td>Cherries</td>
                    <td rowspan="2">75</td>
                </tr>
                <tr>
                    <td>Pineapple</td>
                    <td>Brown</td>
                    <td>Very Large</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <th colspan="5">&copy; 2011 Adam Freeman Fruit Data Enterprises</th>
                </tr>                
            </tfoot>
        </table>
    </body>
</html>

此例中定义了两个 colgroup 元素。span 属性指定了 colgroup 元素负责的列数。代码中第一个 colgroup 负责表格中的前三列,另一个 colgroup 负责剩余两列。两个 colgroup 元素都设置了 id 属性,并以其 id 值为选择器定义了相应的 CSS 样式。

在这里插入图片描述

该图揭示了 colgroup 元素使用中的一些重要特点。首先,应用到 colgroup 上的 CSS 样式在具体程度上低于直接应用到 tr、td 和 th 元素上的样式。从应用到 thead、tfoot 和第一列 th 元素上的样式未受到 colgroup 元素上的样式的影响可以看出这一点。要是把针对 colgroup 元素的样式之外的样式删除掉,那么所有单元格都会受到 colgroup 样式的影响。

第二,不规则单元格被计入起始列。从表格的第三行可以看出这一点。在此行中有一个应用到了第一种样式的单元格扩展到了由另一个 colgroup 元素负责的区域。

最后,colgroup 元素的影响范围覆盖了列中所有的单元格,包括那些位于 thead 和 tfoot 元素中的单元格,不管它们是用 th 还是 td 元素定义的。colgroup 元素的特别之处就在于它影响到的元素并未包含在其内部。因此该元素无法用做更具体的选择器的基础(如 #colgroup1 > td 这个选择器不会有任何匹配元素)。

7.1、表示个别的列

也可以不用 colgroup 元素的 span 属性,改用 col 元素指定组中的各列

元素col
元素类型
允许具备的父元素colgroup 元素
局部属性span
内容
标签用法虚元素形式
习惯样式col { display: table-column; }

使用 col 元素的好处在于能够获得更多的控制权。有了它,既能对一组列应用样式,也能对该组中个别的列应用样式。col 元素位于 colgroup 元素之中,每个 col 元素代表列组中的一列。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
        <style>
            thead th, tfoot th { text-align:left; background:grey; color:white}
            tbody th { text-align:right; background: lightgrey; color:grey}
            [colspan], [rowspan] {font-weight:bold; border: medium solid black}
            thead [colspan], tfoot [colspan] {text-align:center; }
            caption {font-weight: bold; font-size: large; margin-bottom:5px}
            #colgroup1 {background-color: red}
            #col3 {background-color: green; font-size:small}
        </style>
    </head>
    <body>
        <table>
            <caption>Results of the 2011 Fruit Survey</caption>
            <colgroup id="colgroup1">
                <col id="col1And2" span="2"/>
                <col id="col3"/>
            </colgroup>
            <colgroup id="colgroup2" span="2"/>
            <thead>
                <tr>
                    <th>Rank</th><th>Name</th><th>Color</th>
                    <th colspan="2">Size & Votes</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>Favorite:</th><td>Apples</td><td>Green</td>
                    <td>Medium</td><td>500</td>
                </tr>
                <tr>
                    <th>2nd Favorite:</th><td>Oranges</td><td>Orange</td>
                    <td>Large</td><td>450</td>
                </tr>
                <tr>
                    <th>3rd Favorite:</th><td>Pomegranate</td>
                    <td colspan="2" rowspan="2">
                        Pomegranates and cherries can both come in a range of colors 
                        and sizes. 
                    </td>
                    <td>203</td>
                </tr>
                <tr>
                    <th rowspan="2">Joint 4th:</th>
                    <td>Cherries</td>
                    <td rowspan="2">75</td>
                </tr>
                <tr>
                    <td>Pineapple</td>
                    <td>Brown</td>
                    <td>Very Large</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <th colspan="5">&copy; 2011 Adam Freeman Fruit Data Enterprises</th>
                </tr>                
            </tfoot>
        </table>
    </body>
</html>

可以用 col 元素的 span 属性让一个 col 元素代表几列。不用 span 属性的 col 元素只代表一列。此例分别为一个 colgroup 元素和其中的一个 col 元素设定了样式。

在这里插入图片描述


8、设置表格边框

table 元素定义了 border 属性。使用这个属性就是告诉浏览器这个表格是用来表示格式数据而不是用来布置其他元素的。大多数浏览器见到 border 属性后会在表格和每个单元格周围绘出边框。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    </head>
    <body>
        <table border="1">
            <caption>Results of the 2011 Fruit Survey</caption>
            <colgroup id="colgroup1">
                <col id="col1And2" span="2"/>
                <col id="col3"/>
            </colgroup>
            <colgroup id="colgroup2" span="2"/>
            <thead>
                <tr>
                    <th>Rank</th><th>Name</th><th>Color</th>
                    <th colspan="2">Size & Votes</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>Favorite:</th><td>Apples</td><td>Green</td>
                    <td>Medium</td><td>500</td>
                </tr>
                <tr>
                    <th>2nd Favorite:</th><td>Oranges</td><td>Orange</td>
                    <td>Large</td><td>450</td>
                </tr>
                <tr>
                    <th>3rd Favorite:</th><td>Pomegranate</td>
                    <td colspan="2" rowspan="2">
                        Pomegranates and cherries can both come in a range of colors 
                        and sizes. 
                    </td>
                    <td>203</td>
                </tr>
                <tr>
                    <th rowspan="2">Joint 4th:</th>
                    <td>Cherries</td>
                    <td rowspan="2">75</td>
                </tr>
                <tr>
                    <td>Pineapple</td>
                    <td>Brown</td>
                    <td>Very Large</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <th colspan="5">&copy; 2011 Adam Freeman Fruit Data Enterprises</th>
                </tr>                
            </tfoot>
        </table>
    </body>
</html>

border 属性的值必须设置为 1 或空字符串(“”)。该属性并不控制边框的样式,那是 CSS 的工作。

在这里插入图片描述

尽管 border 属性会让浏览器为表格和每个单元格添加边框,还是需要用 CSS 选择器分别针对各种元素重设边框样式。在设计 CSS 选择器时可用的办法有很多:表格的外边框可以通过 table 元素控制;表头、表格主体和表脚可以分别通过 thead、tbody 和 tfoot 元素控制;列可以通过 colgroup 和 col 元素控制;各个单元格可以通过 th 和 td 元素控制。而且,就算别的方法都不管用,至少还可以使用全局属性 id 和 class 确定目标。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在 layui 表格中,可以通过监听复选框的选择来实现批量操作等功能。具体实现步骤如下: 1. 在表格中添加复选框列,并设置lay-skin属性为primary,表示使用layui风格的复选框。 ``` <table class="layui-table" lay-data="{...}"> <colgroup> ... <col width="50"> </colgroup> <thead> ... <th lay-data="{field:'checkbox', width:50, templet:'#checkboxTpl'}"></th> </thead> <tbody> ... </tbody> </table> <script type="text/html" id="checkboxTpl"> <input type="checkbox" lay-skin="primary"> </script> ``` 2. 在JavaScript代码中监听复选框的选择事件,可以使用layui的form模块来实现。需要注意的是,由于表格是动态生成的,所以需要使用layui的form.render()方法重新渲染表单元素。 ``` layui.use(['table', 'form'], function(){ var table = layui.table, form = layui.form; // 监听复选框选择 table.on('checkbox(test)', function(obj){ console.log(obj.checked); // 当前是否选中状态 console.log(obj.data); // 原始数据 console.log(obj.type); // 类型,如果行选则为:row,如果全选则为:all,如果取消选择则为:uncheck console.log(table.checkStatus('test').data); // 获取选中行的数据 }); // 重新渲染表单元素 form.render(); }); ``` 3. 表格中如果存在分页,则需要在分页时重新渲染表单元素。 ``` table.on('page(test)', function(){ form.render(); }); ``` 以上就是监听表格复选框选择的实现方法。需要注意的是,表格中的复选框列必须有唯一的字段名,否则无法在JavaScript代码中获取选中行的数据。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值