vendredi 5 mai 2017

How to find a tr which has a specific class attached and get the details of each td - jquery

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

  1. 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