CODEWITHSUNDEEP
javascriptjqueryjquery-selectorshtml-table
Florin C.
Florin C.

Reputation: 366

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>

Upvotes: 0

Views: 2254

Answers (5)

Kakada NEANG
Kakada NEANG

Reputation: 531

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>

Upvotes: 0

Marcos Alexandre Sedrez
Marcos Alexandre Sedrez

Reputation: 537

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

Upvotes: 0

Pugazh
Pugazh

Reputation: 9561

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>

Upvotes: 0

Rahul Patel
Rahul Patel

Reputation: 5244

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>

Upvotes: 1

Ibrahim Khan
Ibrahim Khan

Reputation: 20750

You can do it like following using toggle().

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

Upvotes: 0

Related Questions