Florin C. Florin C. - 2 months ago 8
Javascript Question

Jquery selecting td for nested tables

I have a child table declared inside a parent table row and I would like to toggle the visibility of the child table when a cell of the parent table has been clicked. The child table should be by default hidden when the page loads.

My click event on the parent td element (class showmore) is being detected but I am having trouble finding the right selector for changing the css property of the parent tr element(class order_extra_info) which contains the child table. By setting css property display:none on this row I would like to entirely hide the child table contained within.

With the current jquery code it seems I am selecting the child td. Any suggestions?



$(document).on('click', 'td.showmore', function() {
var id = ($(this).html());
if ($('tr.order_extra_info#' + id + ' td').is(":visible")) {
$('tr.order_extra_info#' + id + ' td').css("display", "none");
} else {
$( 'tr.order_extra_info#' + id + ' td' ).css("display","table-cell");
}
});

.order_extra_info {
display:none;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered table-hover">
<thead>
<tr>
<td style="width: 1px;" class="text-center">
<input type="checkbox" onclick="$('input[name*=\'selected\']').prop('checked', this.checked);">
</td>
<td class="text-right">ID </td>
<td class="text-left">Status</td>
<td class="text-right">Total</td>
<td class="text-left">Date</td>
</tr>
</thead>
<tbody>
<tr>
<td class="text-center">
<input type="checkbox" name="selected[]" value="1545">
<td class="text-right showmore">1545</td>
<td class="text-left">waiting</td>
<td class="text-right">50</td>
<td class="text-left">18.09.2016</td>
</tr>
<tr class="order_extra_info" id="1545">
<td colspan="15">
<table class="table table-bordered table-hover">
<thead>
<tr>
<td class="text-left" width="25%">Extra 1</td>
<td class="text-left" width="25%">Extra 2</td>
<td class="text-left" width="50%">Extra 3</td>
</tr>
</thead>
<tbody>
<tr>
<td class="text-left">Data
<br>Data
<br>Data
<br>Data</td>
<td class="text-left">Data
<br>Data
<br>Data
<br>Data</td>
<td class="text-left">Data
<br>Data
<br>Data
<br>Data</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>




Answer

Use $('tr.order_extra_info#' + id).toggle();

Your selector was correct but you are trying to check visibility and based on trying to show/hide which was wrong.

Instead of those redundant step only use .toggle() function of jquery.

Please check below snippet for more unserstanding.

$(document).on('click', 'td.showmore', function() {
  var id = ($(this).html());
  $('tr.order_extra_info#' + id).toggle();
});
.order_extra_info {
  display:none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered table-hover">
  <thead>
    <tr>
      <td style="width: 1px;" class="text-center">
        <input type="checkbox" onclick="$('input[name*=\'selected\']').prop('checked', this.checked);">
      </td>
      <td class="text-right">ID </td>
      <td class="text-left">Status</td>
      <td class="text-right">Total</td>
      <td class="text-left">Date</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="text-center">
        <input type="checkbox" name="selected[]" value="1545">
        <td class="text-right showmore">1545</td>
        <td class="text-left">waiting</td>
        <td class="text-right">50</td>
        <td class="text-left">18.09.2016</td>
    </tr>
    <tr class="order_extra_info" id="1545">
      <td colspan="15">
        <table class="table table-bordered table-hover">
          <thead>
            <tr>
              <td class="text-left" width="25%">Extra 1</td>
              <td class="text-left" width="25%">Extra 2</td>
              <td class="text-left" width="50%">Extra 3</td>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td class="text-left">Data
                <br>Data
                <br>Data
                <br>Data</td>
              <td class="text-left">Data
                <br>Data
                <br>Data
                <br>Data</td>
              <td class="text-left">Data
                <br>Data
                <br>Data
                <br>Data</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

Comments