选择和取消选择HTML表中 行 jQuery SelectRows.Js

  • 源码大小:7.09KB
  • 所需积分:1积分
  • 源码编号:19JP-3379
  • 浏览次数:1070次
  • 最后更新:2023年06月07日
  • 所属栏目:表格
本站默认解压密码:19jp.com 或 19jp_com

简介

还有另一个可检查的表jQuery插件,它允许用户使用复选框列表选择和取消选择HTML表中的一行或多行

该插件将所有选择存储在一个数组中,并在选择一行或多行时在输入框中显示逗号分隔的行ID。

如何使用它:

1.将复选框和唯一标识符添加到表的每一行。

  1. <tbody>
  2. <tr>
  3. <td>
  4. <input class="select-row" data-rows-group-id="users" type="checkbox" id="123" data-id="123" />
  5. </td>
  6. <td>
  7. ...
  8. </td>
  9. ...
  10. </tr>
  11. <tr>
  12. <td>
  13. <input class="select-row" data-rows-group-id="users" type="checkbox" id="456" data-id="456" />
  14. </td>
  15. <td>
  16. ...
  17. </td>
  18. ...
  19. </tr>
  20. ...
  21. </tbody>

2.在表格标题中添加“全选”复选框。

  1. <thead>
  2. <th>
  3. <input class="select-all" data-input-id="ids" data-rows-group-id="users" type="checkbox">
  4. </th>
  5. <th>
  6. ...
  7. </th>
  8. ...
  9. </thead>

3.创建一个输入字段来保存所选行的ID。

  1. <script src="/path/to/cdn/jquery.slim.min.js"></script>
  2. <script src="/path/to/selectrows.min.js"></script>

4.初始化插件并完成。

  1. selectRowsJs.init();

预览截图