Add checkboxes to a specific column using Javascript or jquery while displaying a table -
i displaying data in table this:
name country place number ashwin india delhi 123 sita india ajmer 456
and on.
i want add checkboxes on hover column , allow user able select multiple values column. instance, user can select delhi
, ajmer
or delhi
.
please jquery
or javascript
code this?
try -
html -
<table border="1" id="demo"> <tr> <th>name</th> <th>country</th> <th>place</th> <th>number</th> <th>check</th> </tr> <tr> <td > ashwin </td> <td> india </td> <td> delhi </td> <td> 123</td> <td><input type="checkbox" id="chk1" style="display:none"></td> </tr> <tr> <td > sita </td> <td> india </td> <td> ajmer </td> <td> 456</td> <td> <input type="checkbox" id="chk2" style="display:none"></td> </tr> <tr > <td > sita </td> <td> india </td> <td> ajmer </td> <td> 456</td> <td> <input type="checkbox" id="chk2" style="display:none"></td> </tr> </table>
js -
$(document).ready(function(){ $("#demo tr").mouseover(function() { $(this).find("input[type='checkbox']").show(); }); $("#demo tr").mouseout(function(){ var checkbox = $(this).find("input[type='checkbox']"); if (!checkbox.is(':checked')) { $(this).find("input[type='checkbox']").hide(); } }); });
jsfiddle link - https://jsfiddle.net/lvbj2dmm/10/
Comments
Post a Comment