jQuery Plugin for Table rows a
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 byjQuery.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: '✓', //-- html of the tick. can also accept <i class="icon-*"></i> showTickHeader: ' ', //-- 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、网站不提供资料下载,如需下载请到原作者页面进行下载。