jQuery单选反选Table表格特效代码

jQuery单选反选Table表格特效代码

jQuery表格行全选反选单选代码是一款基于tableCheckbox.js插件实现的,鼠标点击表格行时候能选中行内的复选框,且当前行会高亮显示,支持shift多选。

使用方法
引入相关CSS样式

1
<link rel="stylesheet" href="css/bootstrap.min.css">

JS代码

1
2
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery.tableCheckbox.js"></script>

HTML代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<div class="container" style="margin-top:150px;">
  <table class="table table-bordered table-striped">
    <thead>
    <th style="width:20px;"><input type="checkbox"></th>
      <th>编程语言</th>
        </thead>
    <tbody>
      <tr>
        <td><input type="checkbox"></td>
        <td>C</td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>Java</td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>PHP</td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>JavaScript</td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>C++</td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>Python</td>
      </tr>
    </tbody>
  </table>
</div>
当前内容只有登录了才能查看,如果您已经注册,请登录
1

发表评论