jQuery Plugin for Table rows a

jTableCheckbox

jQuery Plugin for Table rows acting as Checkboxes.

What is it?

jTableCheckbox turns each table row into a large checkbox.

Demo

How do I use it? Include jQuery followed by jQuery.jTableCheckbox.js. There is also a minified script included.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="jQuery.jTableCheckbox.min.js"></script> Add data-jtable="xx" to the first td of each row in your table. jTableCheckbox uses the data-jtable attribute in the checkbox for form submission.

<table><tbody><tr> <td data-jtable="row-1"></td> </tr><tr> <td data-jtable="row-2"></td> </tr></tbody></table> jTableCheckbox adds a class of active to a row that has been checked. So probably best to include some css for this class. Nice to include a hover on the row too. And a pointer cursor.

table tbody tr.active{ background-color: #123456; color: #d6e6f6; } table tbody tr:hover{ background-color: #091b2c; color: #d6e6f6; } table tbody{ cursor: pointer; } Finally, apply jTableCheckbox to your table.

$('table').jTableCheckbox(); Are there any options?

Yes, there are. These are the default options.

$('table').jTableCheckbox({ checkBoxName: 'check', //-- name given to the checkboxes ie name="check[]" showCheckboxes: false, //-- do you want to show the checkboxes in the table? showTicks: true, //-- do you want to display ticks in a far left column for selected rows? showTickValue: '&#10003;', //-- html of the tick. can also accept <i class="icon-*"></i> showTickHeader: '&nbsp;', //-- text to go in heading of tick column showTickWidth: 30 //-- width of the tick column. stops it collapsing }); Anything else?

Not really, no. It's been tested on all major (and vintage) browsers. Also works on a mobile device.
Any issues or suggestions, let me know @chrisbradbury

版权声明:

1、该文章(资料)来源于互联网公开信息,我方只是对该内容做点评,所分享的下载地址为原作者公开地址。
2、网站不提供资料下载,如需下载请到原作者页面进行下载。