Jquery selecting td for nested tables

Question

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>

Rahul Patel · Accepted Answer · 2016-09-23 11:44:31Z

1

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>

answered Sep 23, 2016 at 11:44

Rahul Patel

5,2342 gold badges16 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Florin C. Over a year ago

This solution works on the given code snippet and I have voted it as correct but I can't get it to work on my full code. My full code uses the exact same snippet only it is a bigger table with more rows and columns. Any ideas on what could be wrong?

Florin C. Over a year ago

No errors, I think it is something related to the selectors considering my nested tables.

Rahul Patel Over a year ago

In onclick function place console.log($('tr.order_extra_info#' + id).html()) and check what you are getting.

Florin C. Over a year ago

I get 'undefined'. Here is a fiddle with more table data that doesn't work as expected. jsfiddle.net/L33ofpj3

Rahul Patel Over a year ago

I have checked the snippet. id="1545" is multiple times in snippet which is totally wrong. id should be unique in dom.

Ibrahim Khan · Accepted Answer · 2016-09-23 11:43:34Z

0

You can do it like following using toggle().

$(document).on('click', 'td.showmore', function() {
    $(this).closest('tr').next('tr.order_extra_info').toggle() 
});

answered Sep 23, 2016 at 11:43

Ibrahim Khan

20.8k7 gold badges46 silver badges57 bronze badges

Comments

Pugazh · Accepted Answer · 2016-09-23 11:46:11Z

Just use .toggle()

$(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>

Marcos Alexandre Sedrez · Accepted Answer · 2016-09-23 11:50:24Z

$(document).on('click', 'td.showmore', function() {
  var id = ($(this).html());
  $('#'+ 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>

Kakada NEANG · Accepted Answer · 2016-09-23 13:21:28Z

Use jQuery .toogle() and CSS3 :nth-child() Selector

$(document).ready(function(){
	$(".order_extra_info").each(function(){
		$(this).click(function () {
		  $(this).next().toggle(".order-extra-infor-shown");
		});
	});
});

.order-extra-infor-shown {
   display:inline !important;
}
.table tr:nth-child(2n){
   display: none;
}

<!DOCTYPE html>
<html>
<head>
	<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/1.12.4/jquery.min.js"></script>
	
</head>
<body>

	<table class="table table-bordered table-hover">
		<thead>
		<tr>
			<th style="width: 1px;" class="text-center">
				<input type="checkbox" onclick="$('input[name*=\'selected\']').prop('checked', this.checked);">
			</th>
			<th class="text-right">ID </th>
			<th class="text-left">Status</th>
			<th class="text-right">Total</th>
			<th class="text-left">Date</th>
		</tr>
		</thead>
		<tbody>
		<tr class="order_extra_info">
			<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_infos" 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>
		<tr class="order_extra_info">
			<td class="text-center">
				<input type="checkbox" name="selected[]" value="1545">
			<td class="text-right showmore">1546</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_infos">
			<td colspan="15">
				<table class="table table-bordered table-hover">
					<thead>
					<tr>
						<td class="text-left" width="25%">Extra a</td>
						<td class="text-left" width="25%">Extra b</td>
						<td class="text-left" width="50%">Extra c</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>
</body>
</html>

Collectives™ on Stack Overflow

Jquery selecting td for nested tables

5 Answers 5

5 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

5 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related