首先来看看实现的效果图:
HTML中无需添加额外的一列来表示复选框,而是由JS完成,所以正常的表格布局就行了:
rush:xhtml;">
类别名称 | 类别组 | 状态 | 说明 |
---|---|---|---|
重点是JS的实现。复选框很小,不容易点到,所以点击每一行也可以选中该行,并用高亮一些CSS样式表示。点击复选框所在单元格也能选中复选框。
下面是完整代码和注释说明:
rush:xhtml;">
<Meta charset="utf-8">
<Meta http-equiv="X-UA-Compatible" content="IE=edge">
<Meta name="viewport" content="width=device-width,initial-scale=1">
表格
<Meta name="keywords" content="表格">
heading">
列表
类别名称 | 类别组 | 状态 | 说明 |
---|---|---|---|