lundi 8 mai 2017

How to check and Uncheck checkbox and also how to make the checkbox click out of the row click

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