Please check out this fiddle http://ift.tt/2pQNaqx
HTML
<table id="tableID">
<tr onclick="getdetails(this)">
<th>checkbox</th>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr onclick="getdetails(this)">
<td><input name="eachRow" type="checkbox"/> </td>
<td>Alfreds </td>
<td>Maria </td>
<td>Germany</td>
</tr >
<tr onclick="getdetails(this)">
<td><input name="eachRow" type="checkbox"/> </td>
<td>Centro </td>
<td>Francisco </td>
<td>Mexico</td>
</tr>
<tr onclick="getdetails(this)">
<td><input name="eachRow" type="checkbox"/> </td>
<td>Ernst </td>
<td>Roland </td>
<td>Austria</td>
</table>
CSS
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
.highlightRowSelected
{
background-color:#e2e2e2;
}
Jquery
function getdetails(row) {
$("#tableID tbody tr").each(function () {
$(this).removeClass("highlightRowSelected");
});
$(row).addClass("highlightRowSelected");
}
what to modify getdetails(row) so that
1.whenever a row gets clicked its respective checkbox gets ticked
2.other row's checkboxes can be ticked , but that tick should not be a row click (important ) and obviously should not get highlightRowSelected class
- if the row is clicked and has the checkbox ticked(by Point 1) then clicking on the checkbox should not uncheck the checkbox
only jquery allowed
Aucun commentaire:
Enregistrer un commentaire