Develop Reference

JQuery, Fixed header on scroll down issue in data-table

I have given data-table and trying fixed header while scroll down.
below datable displayed.
<table class="temp1 table table-striped dataTable mt-2 table-bordered" cellspacing="0" cellpadding="0" style="margin-bottom: 0px; margin-top: 0px;" role="grid"
aria-describedby="user-list-page-info" id="user-list-table">
<thead id="taablehead">
<tr class="ligth" style="margin-left: 2px;">
<th>id</th>
<th>name</th>
<th>class</th>
<th> </th>
<th> </th>
<th> </th>
</tr>
</thead>
<tbody>
<tr class="ligth">
<tr class="table-info" id="row2" style="background-color: #dadbde;">
<td><input type="checkbox" class="checkbox-input"></td>
<td>10001</td>
<td>karan</td>
<td>A</td>
<td></td>
<td></td>
</tr>
<tr class="table-info" id="row3" style="background-color: #dadbde;">
<td><input type="checkbox" class="checkbox-input"></td>
<td>10002</td>
<td>john</td>
<td>B</td>
<td></td>
<td></td>
</tr>
<tr class="table-info" id="row4" style="background-color: #dadbde;">
<td><input type="checkbox" class="checkbox-input"></td>
<td>10003</td>
<td>rahul</td>
<td>C</td>
<td></td>
<td></td>
</tr>
</tr>
</tbody>
i am trying to fix header on scroll down using below js but didn't work.
$(document).ready(function() {
var table = $('.temp1').DataTable({
fixedHeader: true,
scrollX: true
});
} );
but given error like Uncaught TypeError: Cannot set property '_DT_CellIndex' of undefined i have tried with datatbale js, but didn't work.

Your issue is caused by having a nested <tr>
<tbody>
<tr class='ligth'>
<tr>
Removing that (and not fixing the other typos) removes the error:
$(document).ready(function() {
var table = $('.temp1').DataTable({
fixedHeader: true,
scrollX: true
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet" >
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js"></script>
<table class="temp1 table table-striped dataTable mt-2 table-bordered" cellspacing="0" cellpadding="0" style="margin-bottom: 0px; margin-top: 0px;" role="grid"
aria-describedby="user-list-page-info" id="user-list-table">
<thead id="taablehead">
<tr class="ligth" style="margin-left: 2px;">
<th> </th>
<th>id</th>
<th>name</th>
<th>class</th>
</tr>
</thead>
<tbody>
<tr class="table-info" id="row2" style="background-color: #dadbde;">
<td><input type="checkbox" class="checkbox-input"></td>
<td</td>
<td</td>
<td>10001</td>
<td>karan</td>
<td>A</td>
</tr>
<tr class="table-info" id="row2" style="background-color: #dadbde;">
<td><input type="checkbox" class="checkbox-input"></td>
<td</td>
<td</td>
<td>10002</td>
<td>john</td>
<td>B</td>
</tr>
<tr class="table-info" id="row2" style="background-color: #dadbde;">
<td><input type="checkbox" class="checkbox-input"></td>
<td</td>
<td</td>
<td>10003</td>
<td>rahul</td>
<td>C</td>
</tr>
</tbody>
</table>

Iterating over double 'for-each' function in javascript returning undefined when getting property from 'this' keyword

This must be a stupid question, but I am not able to figure anything to do about it.
I have a simple HTML table with every element having a property 'data-value'. I need to do some operations based on that, but one column at a time. Hence, I wrote a function which only runs on the first td element of each row. I am getting the rows by running another for each function.
When I use console.log($(this)), I am getting the expected td element from the all the first columns. Now, I want to store the 'data-value' property in another variable and do stuff on it.
$(this).find('td:first-of-type').each(function() {
console.log($(this));
//returns td object
})
});
As seen here, all the td elements are correctly being logged on console.
But when I use jquery to get the property 'data-value' from it, I get undefined.
What could be the error ? Is this the best way to iterate every column's tds property ?
$('#table_canvas tbody tr').each(function() {
$(this).find('td:first-of-type').each(function() {
console.log($(this));
//returns td object
})
});
$('#table_canvas tbody tr').each(function() {
$(this).find('td:first-of-type').each(function() {
console.log($(this).attr('data-value'));
//returns tr object which does not have the 'data-value'property
})
});
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<h2>HTML Table</h2>
<table id="table_canvas" class="table table--bordered" style="width: 100%; height: 100%;">
<thead>
<tr style="text-align: right;">
<th></th>
<th>first_name</th>
<th>is_staff</th>
<th>last_name</th>
</tr>
<tr>
<th>id</th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<th hello="hi">1</th>
<td data-property="1">1</td>
<td data-property="True">True</td>
<td data-property="1">1</td>
</tr>
<tr>
<th>3</th>
<td data-property="1">1</td>
<td data-property="True">True</td>
<td data-property="1">1</td>
</tr>
<tr>
<th>4</th>
<td data-property="1">1</td>
<td data-property="True">True</td>
<td data-property="1">1</td>
</tr>
<tr>
<th>5</th>
<td data-property="1">1</td>
<td data-property="True">True</td>
<td data-property="1">1</td>
</tr>
<tr>
<th>6</th>
<td data-property="1">1</td>
<td data-property="True">True</td>
<td data-property="1">1</td>
</tr>
<tr>
<th>7</th>
<td data-property="1">1</td>
<td data-property="True">True</td>
<td data-property="1">1</td>
</tr>
</tbody>
</table>

its been awhile i dont use javascript but i think this is work for you vanilla js
just select every second child of every tr tag
document.querySelectorAll('#table_canvas tr td:nth-child(2)').forEach( x => {
console.log(x.dataset.property);
})

Here's a simple way to obtain the data, using vanilla JavaScript:
form array of <tr> elements
map tr array to array of td data-property values
// array of <tr> elements
let trs = Array.from(document.querySelectorAll('#table_canvas tbody tr'));
// array of 'data-property' values
let props = trs.map(tr =>
tr.querySelector('td').dataset.property);
console.log('props:', JSON.stringify(props));
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
<table id="table_canvas" class="table table--bordered" style="width: 100%; height: 100%;">
<thead>
<tr style="text-align: right;">
<th></th>
<th>first_name</th>
<th>is_staff</th>
<th>last_name</th>
</tr>
<tr>
<th>id</th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<th hello="hi">1</th>
<td data-property="1">1</td>
<td data-property="True">True</td>
<td data-property="1">1</td>
</tr>
<tr>
<th>3</th>
<td data-property="1">1</td>
<td data-property="True">True</td>
<td data-property="1">1</td>
</tr>
<tr>
<th>4</th>
<td data-property="1">1</td>
<td data-property="True">True</td>
<td data-property="1">1</td>
</tr>
<tr>
<th>5</th>
<td data-property="1">1</td>
<td data-property="True">True</td>
<td data-property="1">1</td>
</tr>
<tr>
<th>6</th>
<td data-property="1">1</td>
<td data-property="True">True</td>
<td data-property="1">1</td>
</tr>
<tr>
<th>7</th>
<td data-property="1">1</td>
<td data-property="True">True</td>
<td data-property="1">1</td>
</tr>
</tbody>
</table>

How to add a CSS class to this script function

.unselectable {
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */
user-select: none; /* Likely future */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function () {
var $chk = $("#grpChkBox input:checkbox");
var $tbl = $("#someTable");
$chk.prop('checked', true);
$chk.click(function () {
var colToHide = $tbl.find("." + $(this).attr("name"));
$(colToHide).toggle();
});
});
</script>
<div id="grpChkBox">
<table border="0">
<tbody>
<tr>
<td><input type="checkbox" name="Column_1" /> Column 1</td>
</tr>
<tr>
<td><input type="checkbox" name="Column_2" /> Column 2</td>
</tr>
<tr>
<td><input type="checkbox" name="Column_3" /> Column 3</td>
</tr>
<tr>
<td><input type="checkbox" name="Column_4" /> Column 4</td>
</tr>
</tbody>
</table>
</div>
<table border="1" cellpadding="3" cellspacing="2" id="someTable">
<tr bgcolor="#CCCCCC" class="th">
<th class="Column_1">Column 1</th>
<th class="Column_2">Column 2</th>
<th class="Column_3">Column 3</th>
<th class="Column_4">Column 4</th>
</tr>
<tr>
<td class="Column_1">Data 1</td>
<td class="Column_2">Data 2</td>
<td class="Column_3">Data 3</td>
<td class="Column_4">Data 4</td>
</tr>
</table>
This script Shows or Hides a column in a table. When the checkbox is not checked and the column is hidden, I would like to add class="unselectable" to the column.
Example:
If Column 1 was hidden its class would be class="Column_1 unselectable"

Modify this line:
$(colToHide).toggle();
...to be this:
$(colToHide).toggle().toggleClass('unselectable');
See below for live implementation.
Alternatively, you could remove the .toggle() from your JS and leave only the toggleClass('unselectable') function, and simply add display: none to the .unselectable class in your CSS.
.unselectable {
-webkit-user-select: none;
/* Chrome all / Safari all */
-moz-user-select: none;
/* Firefox all */
-ms-user-select: none;
/* IE 10+ */
user-select: none;
/* Likely future */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function() {
var $chk = $("#grpChkBox input:checkbox");
var $tbl = $("#someTable");
$chk.prop('checked', true);
$chk.click(function() {
var colToHide = $tbl.find("." + $(this).attr("name"));
$(colToHide).toggle().toggleClass('unselectable');
});
});
</script>
<div id="grpChkBox">
<table border="0">
<tbody>
<tr>
<td><input type="checkbox" name="Column_1" /> Column 1</td>
</tr>
<tr>
<td><input type="checkbox" name="Column_2" /> Column 2</td>
</tr>
<tr>
<td><input type="checkbox" name="Column_3" /> Column 3</td>
</tr>
<tr>
<td><input type="checkbox" name="Column_4" /> Column 4</td>
</tr>
</tbody>
</table>
</div>
<table border="1" cellpadding="3" cellspacing="2" id="someTable">
<tr bgcolor="#CCCCCC" class="th">
<th class="Column_1">Column 1</th>
<th class="Column_2">Column 2</th>
<th class="Column_3">Column 3</th>
<th class="Column_4">Column 4</th>
</tr>
<tr>
<td class="Column_1">Data 1</td>
<td class="Column_2">Data 2</td>
<td class="Column_3">Data 3</td>
<td class="Column_4">Data 4</td>
</tr>
</table>

Display Single Table Cells in Row on Checkbox Clicked

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

Format table heder and body

$("input:checkbox:not(:checked)").each(function() {
var column = "table ." + $(this).attr("name");
$(column).hide();
});
$("input:checkbox").click(function() {
var column = "table ." + $(this).attr("name");
$(column).toggle();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p style="margin-left:15px;">Additional information select below:</p>
<p style="display:inline; margin-left:15px">
<input type="checkbox" name="vendor" />Vendor Details
<input type="checkbox" name="ONX" />Quantity Level
<input type="checkbox" name="Cost" />Cost Detail
<!-- <li><input type="checkbox" name="d" />d</li> -->
</p>
<table id="testTable" class="fixed_headers">
<caption>
<u><h2 >ITEM ONHAND QUANTITIES & GOODS IN TRANSACTION</h2></u>
</caption>
<thead>
<tr class="header" style="background-color: #3f91bd;color:white; /* position: absolute; width: 83%; */">
<th class="first">ITEM CODE</th>
<th class="second">ITEM NAME</th>
<th class="third">UNIT</th>
<th class="headcol">ON HAND QTY</th>
<th class="headcol">GIT</th>
<th class="headcol">ATP</th>
<th class="ONX" name="ONX">ONX LOW LMT</th>
<th class="ONX" name="ONX">ONX HIGH LMT</th>
<th class="ONX" name="ONX">ONX RE-ORDER-LEVEL</th>
<th class="Cost">AVG COST</th>
<th class="Cost">LAST PO PRICE</th>
<th class="vendor" name="vendor">V_CODE</th>
<th class="vendor">MAIN_VENDOR</th>
<th class="vendor">VENDOR_TYPE</th>
<th class="vendor">Vendor Mx LEAD TIM</th>
</tr>
</thead>
<tbody style="display: block; border: 1px solid green; overflow-y: scroll; overflow-x: scroll; height:400px; width:850px">
<tr>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td class="ONX">aaa</td>
<td class="ONX">aaa</td>
<td class="ONX">aaa</td>
<td class="Cost">aaa</td>
<td class="Cost">aaa</td>
<td class="vendor">aaa</td>
<td class="vendor">aaa</td>
<td class="vendor">aaa</td>
<td class="vendor">aaa</td>
</tr>
<tr>
<td>bbb</td>
<td>bbb</td>
<td>bbb</td>
<td>bbb</td>
<td>bbb</td>
<td>bbb</td>
<td class="ONX">bbb</td>
<td class="ONX">bbb</td>
<td class="ONX">bbb</td>
<td class="Cost">bbb</td>
<td class="Cost">bbb</td>
<td>class="vendor">bbb</td>
<td class="vendor">bbb</td>
<td class="vendor">bbb</td>
<td class="vendor">bbb</td>
</tr>
</tbody>
</table>
The table head and body are not displaying in proper format. I have to fix this issue. Any suggestion for the same will be appreciated. I want to make each <tbody> column under corresponding <thead> column.

Remove display: block; from the tbody inline style
<p style="margin-left:15px;">Additional information select below:</p>
<p style="display:inline; margin-left:15px">
<input type="checkbox" name="vendor" />Vendor Details
<input type="checkbox" name="ONX" />Quantity Level
<input type="checkbox" name="Cost" />Cost Detail
<!-- <li><input type="checkbox" name="d" />d</li> -->
</p>
<table id="testTable" class="fixed_headers">
<caption><u><h2 >ITEM ONHAND QUANTITIES & GOODS IN TRANSACTION</h2></u>
</caption>
<thead>
<tr class="header" style="background-color: #3f91bd; color: white;">
<th class="first">ITEM CODE</th>
<th class="second">ITEM NAME</th>
<th class="third">UNIT</th>
<th class="headcol">ON HAND QTY</th>
<th class="headcol">GIT</th>
<th class="headcol">ATP</th>
<th class="ONX" name="ONX">ONX LOW LMT</th>
<th class="ONX" name="ONX">ONX HIGH LMT</th>
<th class="ONX" name="ONX">ONX RE-ORDER-LEVEL</th>
<th class="Cost">AVG COST</th>
<th class="Cost">LAST PO PRICE</th>
<th class="vendor" name="vendor">V_CODE</th>
<th class="vendor">MAIN_VENDOR</th>
<th class="vendor">VENDOR_TYPE</th>
<th class="vendor">Vendor Mx LEAD TIM</th>
</tr>
</thead>
<tbody style="border: 1px solid green; overflow-y: scroll; overflow-x: scroll; height:400px; width:850px">
<tr>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td class="ONX">aaa</td>
<td class="ONX">aaa</td>
<td class="ONX">aaa</td>
<td class="Cost">aaa</td>
<td class="Cost">aaa</td>
<td class="vendor">aaa</td>
<td class="vendor">aaa</td>
<td class="vendor">aaa</td>
<td class="vendor">aaa</td>
</tr>
<tr>
<td>bbb</td>
<td>bbb</td>
<td>bbb</td>
<td>bbb</td>
<td>bbb</td>
<td>bbb</td>
<td class="ONX">bbb</td>
<td class="ONX">bbb</td>
<td class="ONX">bbb</td>
<td class="Cost">bbb</td>
<td class="Cost">bbb</td>
<td class="vendor">bbb</td>
<td class="vendor">bbb</td>
<td class="vendor">bbb</td>
<td class="vendor">bbb</td>
</tr>
</tbody>
</table>