Display Single Table Cells in Row on Checkbox Clicked - javascript

I currently have a multiple column table with one column being a column full of checkboxes. Whenever I check a checkbox, I want an extra cell to appear on the right side of the table. Currently, when I check a checkbox, it displays the entire column, but I am wanting it to only display the cell that is in the corresponding row.
How can I do this?
My PHP/HTML code:
<table id="merchTable" cellspacing="5" class="sortable">
<thead>
<tr class="ui-widget-header">
<th class="sorttable_nosort"></th>
<th class="sorttable_nosort">Loc</th>
<th class="merchRow">Report Code</th>
<th class="merchRow">SKU</th>
<th class="merchRow">Special ID</th>
<th class="merchRow">Description</th>
<th class="merchRow">Quantity</th>
<th class="sorttable_nosort">Unit</th>
<th style="display: none;" class="num">Quantity #</th>
</tr>
</thead>
<tbody>
<?php foreach ($dbh->query($query) as $row) {?>
<tr>
<td><input type="checkbox" class="check" name="check"></td>
<td class="loc"></td>
<td class="rp-code" align="center"></td>
<td class="sku"></td>
<td class="special-id" align="center"></td>
<td class="description"></td>
<td class="quantity" align="center"></td>
<td class="unit"></td>
<td style="display: none;" class="quantity_num"></td>
</tr>
<?php } ?>
</tbody>
</table>
My JavaScript Code:
$(function () {
$(".check").change(function(){
$("#merchTable th.num").toggle(this.checked);
$("#merchTable td.quantity_num").toggle(this.checked);
});
});
I have changed my code to make it work with a JSFiddle so you can see something for an example of what I currently have and what is going on:
https://jsfiddle.net/d8494316/


Change your JS code to this:
$(function () {
$(".check").change(function(){
$(this).closest('tr').find('td.quantity_num').toggle(this.checked)
});
});
Here's a snippet:
$(function () {
$(".check").change(function(){
$(this).closest('tr').find('td.quantity_num').toggle(this.checked);
console.log($('input.check').is(':checked'))
if($('input.check').is(':checked'))
$(this).closest('table').find('th.num').toggle(true);
else
$(this).closest('table').find('th.num').toggle(false);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="merchTable" cellspacing="10" class="sortable">
<thead>
<tr class="ui-widget-header">
<th class="sorttable_nosort"></th>
<th class="sorttable_nosort">Loc</th>
<th class="merchRow">Report Code</th>
<th class="merchRow">SKU</th>
<th class="merchRow">Special ID</th>
<th class="merchRow">Description</th>
<th class="merchRow">Quantity</th>
<th class="sorttable_nosort">Unit</th>
<th style="display: none;" class="num">Quantity #</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="check" name="check"></td>
<td class="loc">Ex. 1</td>
<td class="rp-code" align="center">Ex. 2</td>
<td class="sku">Ex. 3</td>
<td class="special-id" align="center">Ex. 4</td>
<td class="description">Ex. 5</td>
<td class="quantity" align="center">Ex. 6</td>
<td class="unit">Ex. 7</td>
<td style="display: none;" class="quantity_num">Ex. 8</td>
</tr>
<tr>
<td><input type="checkbox" class="check" name="check"></td>
<td class="loc">Ex. 1</td>
<td class="rp-code" align="center">Ex. 2</td>
<td class="sku">Ex. 3</td>
<td class="special-id" align="center">Ex. 4</td>
<td class="description">Ex. 5</td>
<td class="quantity" align="center">Ex. 6</td>
<td class="unit">Ex. 7</td>
<td style="display: none;" class="quantity_num">Ex. 8</td>
</tr>
<tr>
<td><input type="checkbox" class="check" name="check"></td>
<td class="loc">Ex. 1</td>
<td class="rp-code" align="center">Ex. 2</td>
<td class="sku">Ex. 3</td>
<td class="special-id" align="center">Ex. 4</td>
<td class="description">Ex. 5</td>
<td class="quantity" align="center">Ex. 6</td>
<td class="unit">Ex. 7</td>
<td style="display: none;" class="quantity_num">Ex. 8</td>
</tr>
</tbody>
</table>


It's enough to change this line:
$("#merchTable td.quantity_num").toggle(this.checked);
to:
$(this).closest('td').nextAll(" td.quantity_num").toggle(this.checked);
In order to preserve the first column toggled if there are more than one checked element you can change:
$("#merchTable th.num").toggle(this.checked);
to:
$("#merchTable th.num").toggle($("#merchTable td.quantity_num:visible").length > 0);
This line must be added as last line.
Updated jsfiddle

Related

Add rows in a specific column in JavaScript

I have a table in HTML, which has 616 rows. However, I would like to add an extra column, and each of the rows for that column would contain the same element. Is there a way with JS to do that? What I would like to add on each row for that column is this symbol
Which is just an add button that goes in every element.
Here is my code:
<div class="scrollingTable">
<div class="row justify-content-center">
<div class="col-md-8 col-lg-8 mb-8">
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<table id="myTable" cellspacing="0" cellpadding="1" border="1" width="300">
<thead>
<tr>
<th title="Field #1">drinkName</th>
<th title="Field #2">drinkSizeInFlOz</th>
<th title="Field #3">calories</th>
<th title="Field #4">caffeineInMg</th>
<th title="Field #5">caffeineInMgPerFloz</th>
<th title="Field #6">type</th>
</tr>
</thead>
<tbody>
<tr>
<td>28 Black Energy Drink</td>
<td>8.46</td>
<td align="right">125</td>
<td align="right">80</td>
<td align="right">9.5</td>
<td>ED</td>
<td><button type="submit" id="myButton">+</button></td>
</tr>
<tr>
<td>3 Water </td>
<td>16.9</td>
<td align="right">0</td>
<td align="right">50</td>
<td align="right">3.0</td>
<td>W</td>
<td><button type="submit" id="myButton">+</button></td>
</tr>
<tr>
<td>3D Energy Drink</td>
<td>16</td>
<td align="right">15</td>
<td align="right">200</td>
<td align="right">12.5</td>
<td>ED</td>
<td><button type="submit" id="myButton">+</button></td>
</tr>
<tr>
<td>4 Purpose Energy Drink</td>
<td>8.46</td>
<td align="right">70</td>
<td align="right">70</td>
<td align="right">8.3</td>
<td>ED</td>
<td><button type="submit" id="myButton">+</button></td>
</tr>
<tr>
<td>4C Energy Drink Mix</td>
<td>16.9</td>
<td align="right">15</td>
<td align="right">170</td>
<td align="right">10.1</td>
<td>ED</td>
<td><button type="submit" id="myButton">+</button></td>
</tr>
<tr>
<td>5 Hour Energy</td>
<td>1.93</td>
<td align="right">4</td>
<td align="right">200</td>
<td align="right">103.6</td>
<td>ES</td>
<td><button type="submit" id="myButton">+</button></td>
</tr>
<tr>
<td>5 Hour Energy Extra Strength</td>
<td>1.93</td>
<td align="right">0</td>
<td align="right">230</td>
<td align="right">119.2</td>
<td>ES</td>
<td><button type="submit" id="myButton">+</button></td>
</tr>
<tr>

I created the jsfiddle for your problem.
var trs = document.querySelectorAll("#myTable tbody tr");
for (var tr of trs) {
let td = document.createElement("td");
let btn = document.createElement("button");
btn.innerHTML = "+";
btn.type = "submit";
td.appendChild(btn);
tr.appendChild(td);
}
<html>
<body>
<div class="scrollingTable">
<div class="row justify-content-center">
<div class="col-md-8 col-lg-8 mb-8" >
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name" >
<table id="myTable" cellspacing="0" cellpadding="1" border="1" width="300">
<thead>
<tr>
<th title="Field #1">drinkName</th>
<th title="Field #2">drinkSizeInFlOz</th>
<th title="Field #3">calories</th>
<th title="Field #4">caffeineInMg</th>
<th title="Field #5">caffeineInMgPerFloz</th>
<th title="Field #6">type</th>
</tr>
</thead>
<tbody>
<tr>
<td>28 Black Energy Drink</td>
<td>8.46</td>
<td align="right">125</td>
<td align="right">80</td>
<td align="right">9.5</td>
<td>ED</td>
</tr>
<tr>
<td>3 Water </td>
<td>16.9</td>
<td align="right">0</td>
<td align="right">50</td>
<td align="right">3.0</td>
<td>W</td>
</tr>
<tr>
<td>3D Energy Drink</td>
<td>16</td>
<td align="right">15</td>
<td align="right">200</td>
<td align="right">12.5</td>
<td>ED</td>
</tr>
<tr>
<td>4 Purpose Energy Drink</td>
<td>8.46</td>
<td align="right">70</td>
<td align="right">70</td>
<td align="right">8.3</td>
<td>ED</td>
</tr>
<tr>
<td>4C Energy Drink Mix</td>
<td>16.9</td>
<td align="right">15</td>
<td align="right">170</td>
<td align="right">10.1</td>
<td>ED</td>
</tr>
<tr>
<td>5 Hour Energy</td>
<td>1.93</td>
<td align="right">4</td>
<td align="right">200</td>
<td align="right">103.6</td>
<td>ES</td>
</tr>
<tr>
<td>5 Hour Energy Extra Strength</td>
<td>1.93</td>
<td align="right">0</td>
<td align="right">230</td>
<td align="right">119.2</td>
<td>ES</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>

There are a lot of ways to insert a column into each row of a table.
It all depends on what libraries you are using.
I will assume that you are using vanilla Javascript, (i.e: no external libraries).
Here is one way to insert a column, and control the content of each cell,
including detecting if you are currently on the table header, or normal cell.
const btn = document.getElementById('my-button');
btn.addEventListener('click', function(){
const tr = document.querySelectorAll('#my-table tr');
tr.forEach((row,index) => {
let cell;
if(index===0) {
cell = document.createElement('th');
cell.innerText = "fourth column";
} else {
cell = document.createElement('td');
cell.innerText = `row ${index},4`;
}
row.appendChild(cell);
});
});
table, td, th
{
border: 1px solid grey;
border-collapse: collapse;
}
td, th
{
padding: 1em;
}
button
{
margin-top: 2em;
}
<button id="my-button">Insert missing column</button>
<table id="my-table">
<thead>
<tr>
<th>first column</th>
<th>second column</th>
<th>third column</th>
</tr>
</thead>
<tbody>
<tr>
<td>row 1, 1</td>
<td>row 1, 2</td>
<td>row 1, 3</td>
</tr>
<tr>
<td>row 2, 1</td>
<td>row 2, 2</td>
<td>row 2, 3</td>
</tr>
<tr>
<td>row 3, 1</td>
<td>row 3, 2</td>
<td>row 3, 3</td>
</tr>
</tbody>
</table>

const rows = document.getElementsByTagName("table")[0].rows; //Get all rows
for (let i = 1; i < rows.length; i++) { // Iterate rows of body
const row = rows[i]; // Get row
const button = document.createElement("button"); // Create button
button.innerHTML = "+"; // Set text of button
const cell = document.createElement("td"); // Create column
cell.appendChild(button); // Add button to column
row.appendChild(cell); // Add column to row
}
<div class="scrollingTable">
<div class="row justify-content-center">
<div class="col-md-8 col-lg-8 mb-8">
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<table id="myTable" cellspacing="0" cellpadding="1" border="1" width="300">
<thead>
<tr>
<th title="Field #1">drinkName</th>
<th title="Field #2">drinkSizeInFlOz</th>
<th title="Field #3">calories</th>
<th title="Field #4">caffeineInMg</th>
<th title="Field #5">caffeineInMgPerFloz</th>
<th title="Field #6">type</th>
</tr>
</thead>
<tbody>
<tr>
<td>28 Black Energy Drink</td>
<td>8.46</td>
<td align="right">125</td>
<td align="right">80</td>
<td align="right">9.5</td>
<td>ED</td>
</tr>
<tr>
<td>3 Water </td>
<td>16.9</td>
<td align="right">0</td>
<td align="right">50</td>
<td align="right">3.0</td>
<td>W</td>
</tr>
<tr>
<td>3D Energy Drink</td>
<td>16</td>
<td align="right">15</td>
<td align="right">200</td>
<td align="right">12.5</td>
<td>ED</td>
</tr>
<tr>
<td>4 Purpose Energy Drink</td>
<td>8.46</td>
<td align="right">70</td>
<td align="right">70</td>
<td align="right">8.3</td>
<td>ED</td>
</tr>
<tr>
<td>4C Energy Drink Mix</td>
<td>16.9</td>
<td align="right">15</td>
<td align="right">170</td>
<td align="right">10.1</td>
<td>ED</td>
</tr>
<tr>
<td>5 Hour Energy</td>
<td>1.93</td>
<td align="right">4</td>
<td align="right">200</td>
<td align="right">103.6</td>
<td>ES</td>
</tr>
<tr>
<td>5 Hour Energy Extra Strength</td>
<td>1.93</td>
<td align="right">0</td>
<td align="right">230</td>
<td align="right">119.2</td>
<td>ES</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

IMPORTANT!
#IDs ARE UNIQUE!
Do not have more than one of the same #id on a page because it's:
invalid HTML
semantically gross
behavior becomes unpredictable
JavaScript if not immediately but eventually break
the terrorists win
There's like a ton of these in OP:
<button type="submit" id="myButton">+</button> <!--👎-->
Try to avoid using #id at all -- use .class instead.
In the example below the function insertCol() is versatile and reusable. The <table> has a <tfoot> for demonstration purposes. Details are commented in the example.
// This object stores content for insertCol() to fill a table
let content = {
cap: {
text: 'TEXT',
side: '',
act: 0 // 1='use data' 0='skip data'
},
tH: {
th: 'tH',
act: 0
},
tB: {
th: '',
td: `<td><button class="btn btn-sm btn-info add">âž•</button></td>`,
act: 1
},
tF: {
td: 'tF',
act: 0
}
};
/**
* #desc - Inserts a column into a given table
* #param {number} index - Index to inert new column at
* #param {object} content - Object that stores content
* #param {string<selector>} selector - CSS Selector of a
* tag if undefined #default is "table"
*/
function insertCol(index, content, selector = 'table') {
// Reference <table>
const table = document.querySelector(selector);
// Collect all <tr> into an array
const rowArray = [...table.rows];
let cols = rowArray[0].cells.length;
let size = rowArray.length;
//console.log(size);
//console.log(cols);
/*
If content.tB is active (1)...
... .foreach() <tr> add <td> and content at the index
*/
if (content.tB.act) {
rowArray.forEach(tr => {
tr.insertCell(index).innerHTML = content.tB.td;
});
}
/*
If there's a <thead> AND content.tH.act === 1...
... .removeCell() at index...
... add <th> with content
*/
if (table.tHead && content.tH.act) {
rowArray[0].deleteCell(index);
rowArray[0].insertCell(index).outerHTML = `<th>${content.tH.th}</th>`;
}
// The same as above for <tfoot>
if (table.tFoot && content.tF.act) {
rowArray[size - 1].deleteCell(index);
rowArray[size - 1].insertCell(index).innerHTML = content.tF.td;
}
// This block is for <caption>
if (table.caption && content.cap.act) {
table.caption.innerHTML = content.cap.text;
table.caption.style.captionSide = content.cap.side;
}
}
// -1 is the index after the last index
insertCol(-1, content);
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<style></style>
</head>
<body>
<main class="container scrollingTable">
<section class="row justify-content-center">
<div class="col-md-8 col-lg-8 mb-8">
<label class='form-label' for='search'>Search</label>
<input id="search" class='form-control mb-2' type="text" placeholder="Search for names..">
<table class='table table-striped table-hover'>
<caption></caption>
<thead>
<tr>
<th title="Field #1">drinkName</th>
<th title="Field #2">drinkSizeInFlOz</th>
<th title="Field #3">calories</th>
<th title="Field #4">caffeineInMg</th>
<th title="Field #5">caffeineInMgPerFloz</th>
<th title="Field #6">type</th>
</tr>
</thead>
<tbody>
<tr>
<td>28 Black Energy Drink</td>
<td>8.46</td>
<td>125</td>
<td>80</td>
<td>9.5</td>
<td>ED</td>
</tr>
<tr>
<td>3 Water </td>
<td>16.9</td>
<td>0</td>
<td>50</td>
<td>3.0</td>
<td>W</td>
</tr>
<tr>
<td>3D Energy Drink</td>
<td>16</td>
<td>15</td>
<td>200</td>
<td>12.5</td>
<td>ED</td>
</tr>
<tr>
<td>4 Purpose Energy Drink</td>
<td>8.46</td>
<td>70</td>
<td>70</td>
<td>8.3</td>
<td>ED</td>
</tr>
<tr>
<td>4C Energy Drink Mix</td>
<td>16.9</td>
<td>15</td>
<td>170</td>
<td>10.1</td>
<td>ED</td>
</tr>
<tr>
<td>5 Hour Energy</td>
<td>1.93</td>
<td>4</td>
<td>200</td>
<td>103.6</td>
<td>ES</td>
</tr>
<tr>
<td>5 Hour Energy Extra Strength</td>
<td>1.93</td>
<td>0</td>
<td>230</td>
<td>119.2</td>
<td>ES</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>FOOT</td>
<td>FOOT</td>
<td>FOOT</td>
<td>FOOT</td>
<td>FOOT</td>
<td>FOOT</td>
</tr>
</tfoot>
</table>
</div>
</section>
</main>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script></script>
</body>
</html>

Moving specific tr's into a specific td with javascript

I'm trying to change the format of a predefined table. I do not have access to the HTML, only CSS and JS.
Basically what I want is to move every tr except the first into the first tr's td with class="field_3".
<table style="border: 1px solid black;">
<tbody >
<tr id="unique_id_1">
<td class="field_1"><span class="col-1">Item</span></td>
<td class="field_2">No 1</td>
<td class="field_3"></td>
</tr>
<tr id="unique_id_2">
<td class="field_1"></td>
<td class="field_2"></td>
<td class="field_3">Action 1</td>
</tr>
<tr id="unique_id_3">
<td class="field_1"></td>
<td class="field_2"></td>
<td class="field_3">Action 2</td>
</tr>
<tr id="unique_id_4">
<td class="field_1"></td>
<td class="field_2"></td>
<td class="field_3">Action 3</td>
</tr>
</tbody>
</table>
I have managed to make a working script by targeting the tr's id directly:
var rows = $("#unique_id_2, #unique_id_3, #unique_id_4");
$("#unique_id_1 > td.field_3").append(rows);
But I need a way to select them programmatically as their id are being generated uniquely.
After searching and trying for days I have not managed to wrap my head around this.
So any insight to help solve this would be greatly appreciated.
Edit: Added another snippet with more rows which adds to the complexity of the solution.
<table style="border: 1px solid black;">
<tbody >
<tr class="group">
<td></td>
</tr>
<tr id="unique_id_1">
<td class="field_1"><span class="col-1">Item</span></td>
<td class="field_2">No 1</td>
<td class="field_3"></td>
</tr>
<tr id="unique_id_2">
<td class="field_1"></td>
<td class="field_2"></td>
<td class="field_3">Action 1</td>
</tr>
<tr id="unique_id_3">
<td class="field_1"></td>
<td class="field_2"></td>
<td class="field_3">Action 2</td>
</tr>
<tr id="unique_id_4">
<td class="field_1"></td>
<td class="field_2"></td>
<td class="field_3">Action 3</td>
</tr>
<tr class="group">
<td></td>
</tr>
<tr id="unique_id_5">
<td class="field_1"><span class="col-1">Item</span></td>
<td class="field_2">No 2</td>
<td class="field_3"></td>
</tr>
<tr id="unique_id_6">
<td class="field_1"></td>
<td class="field_2"></td>
<td class="field_3">Action 1</td>
</tr>
<tr id="unique_id_7">
<td class="field_1"></td>
<td class="field_2"></td>
<td class="field_3">Action 2</td>
</tr>
<tr id="unique_id_8">
<td class="field_1"></td>
<td class="field_2"></td>
<td class="field_3">Action 3</td>
</tr>
</tbody>
</table>
Regards,
Espen

You can try this
$( document ).ready(function() {
var firstTr = $("tr:first-child").attr("id");
var rows =$("#"+firstTr ).nextAll();
$("tr:first-child td:last-child").append(rows);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table style="border: 1px solid black;">
<tbody >
<tr id="unique_id_1">
<td class="field_1"><span class="col-1">Item</span></td>
<td class="field_2">No 1</td>
<td class="field_3"></td>
</tr>
<tr id="unique_id_2">
<td class="field_1"></td>
<td class="field_2"></td>
<td class="field_3">Action 1</td>
</tr>
<tr id="unique_id_3">
<td class="field_1"></td>
<td class="field_2"></td>
<td class="field_3">Action 2</td>
</tr>
<tr id="unique_id_4">
<td class="field_1"></td>
<td class="field_2"></td>
<td class="field_3">Action 3</td>
</tr>
</tbody>
</table>
It will handle any length of table and if it solves your problem don't forget to vote and accept the answer

playing sound onchange table content

I am trying to make a function which will play a sound when the value of a table field changes I tried it like this:
$(document).ready(function(){
$("#hor-zebra").change(function(){
document.getElementById('bflat').play()
});
});
Sorry I forgot my HTML:
<audio id="bflat" src="timbre.mp3"></audio>
<table id="hor-zebra" class="col-6" summary="">
<thead>
<tr>
<th scope="col">Ticket</th>
<th scope="col">Puesto</th>
</tr>
</thead>
<tbody>
<tr class="odd first">
<td class="first">A083</td>
<td class="first">MESA 1</td>
</tr>
<tr class="odd">
<td>B064</td>
<td>MESA 9</td>
</tr>
<tr>
<td>C028</td>
<td>MESA 5</td>
</tr>
</tbody>

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>

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>

You can do it like following using toggle().
$(document).on('click', 'td.showmore', function() {
$(this).closest('tr').next('tr.order_extra_info').toggle()
});

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>

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

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>

how to align my td's with equal width?

this is my html code:http://jsfiddle.net/Udxyb/427/
in the below code..Under each of these columns(section1, section2, section3, section4) i want two equal columns and these columns with should not vary if the input data is lenghty.
instead the width of both columns must remain the same rather than increase.is it possible???
<table id="main_table" style="width:100%">
<thead>
<tr class="firstline">
<th colspan="2">Column1</th>
<th colspan="2">Column2</th>
<th colspan="2">Column3</th>
<th colspan="2">Column4</th>
</tr>
</thead>
<tbody>
<tr style="width:1002px; background-color:green; color:white">
<td colspan="2" class="flip" style="width:250px;"> Section 1 </td>
<td colspan="2" class="flip" style="width:250px;"> Section 1 </td>
<td colspan="2" class="flip" style="width:250px;"> Section 1 </td>
<td colspan="2" class="flip" style="width:250px;"> Section 1 </td>
</tr>
</tbody>
<tbody class="section">
<tr>
<td style="width:125px;">item 111sdfgadgrfag</td>
<td>item 112</td>
<td>item 113</td>
<td>item 114</td>
<td>item 115</td>
<td>item 116</td>
<td>item 117</td>
<td>item 118dfgdfgdfgdfgg</td>
</tr>
<tr>
<td colspan="2">item 121</td>
<td colspan="2">item 122</td>
<td colspan="2">item 123</td>
<td colspan="2">item 124</td>
</tr>
<tr>
<td colspan="2">item 131</td>
<td colspan="2">item 132</td>
<td colspan="2">item 133</td>
<td colspan="2">item 134</td>
</tr>
</tbody>
<tbody>
<tr style="background-color:green; color:white">
<td colspan="2" class="flip" style="width:250px;"> Section 2 </td>
<td colspan="2" class="flip" style="width:250px;"> Section 2 </td>
<td colspan="2" class="flip" style="width:250px;"> Section 2 </td> <td colspan="2" class="flip" style="width:250px;"> Section 2 </td>
</tr>
</tbody>
<tbody class="section">
<tr>
<td colspan="2">item 211</td>
<td colspan="2">item 212</td>
<td colspan="2">item 213</td>
<td colspan="2">item 214</td>
</tr>
<tr>
<td colspan="2">item 221</td>
<td colspan="2">item 222</td>
<td colspan="2">item 223</td>
<td colspan="2">item 224</td>
</tr>
<tr>
<td colspan="2">item 231</td>
<td colspan="2">item 232</td>
<td colspan="2">item 233</td>
<td colspan="2">item 234</td>
</tr>
</tbody>
<tbody>
<tr style="background-color:green; color:white">
<td colspan="2" class="flip" style="width:250px;"> Section 3 </td>
<td colspan="2" class="flip" style="width:250px;"> Section 3 </td>
<td colspan="2" class="flip" style="width:250px;"> Section 3 </td>
<td colspan="2" class="flip" style="width:250px;"> Section 3 </td>
</tr>
</tbody>
<tbody class="section">
<tr>
<td colspan="2">item 311</td>
<td colspan="2">item 312</td>
<td colspan="2">item 313</td>
<td colspan="2">item 314</td>
</tr>
<tr>
<td colspan="2">item 321</td>
<td colspan="2">item 322</td>
<td colspan="2">item 323</td>
<td colspan="2">item 324</td>
</tr>
<tr>
<td colspan="2">item 331</td>
<td colspan="2">item 332</td>
<td colspan="2">item 333</td>
<td colspan="2">item 334</td>
</tr>
</tbody>
</table>

Write:
#main_table{table-layout:fixed;}
Updated fiddle here.

Assign fixed table layout property to your table and word-wrap:break-word; for the td's
Hope that will solves your problem
<table id="main_table" style="width:100%;table-layout:fixed;">
in css
td {
padding: 5px;
word-wrap:break-word;
}

Categories

Resources