How can I make only the clicked row checkbox ticked and only one row having class highlightRowSelected one time - this is working
How to make other checkboxes deselect which does not have class highlightRowSelected and also other rows checkbox es can be ticked but that should not add class highlightRowSelected to that row , only row click(not from checkbox col) should add the class highlightRowSelected to that row
you can change the function declaration and make a pure js call rather than specifying getdetails(row) in the html.. Also the rows are dynamic so cant hardcode id or something in html
Check out this fiddle: http://ift.tt/2pS5QHQ
function getdetails(row) {
el = window.event.srcElement;
if (el.id.substr(0, 7) == 'eachRow')
el = null;
if (row.cells[0].children[0].checked == false && el != null) {
row.cells[0].children[0].checked = true;
} else if (row.cells[0].children[0].checked == false && el != null) {
row.cells[0].children[0].checked = true;
}
$("#tableID tbody tr").each(function() {
$(this).removeClass("highlightRowSelected");
});
$(row).addClass("highlightRowSelected");
}
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;
}
<script src="http://ift.tt/1oMJErh"></script>
<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>
Aucun commentaire:
Enregistrer un commentaire