.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>
Related
I am new to javascript and trying to write a javascript code so when a button is clicked its colour will change. I tried different ways but when clicked on the first element works. Not really sure what is going on here. I would appreciate any help.
var count = 1;
function setColor(button, color) {
var property = document.getElementsByClassName("button");
if (count == 0) {
property.style.backgroundColor = "#A94E3B"
count = 1;
}
else {
property.style.backgroundColor = "#EAE8E8"
count = 0;
}
}
this way, with event delegation and classList toggle
const myTable = document.getElementById('my-table')
myTable.onclick = e =>
{
if (!e.target.matches('#my-table button')) return
e.target.classList.toggle('orange')
}
#my-table button {
background-color : yellow;
}
#my-table button.orange {
background-color : orange;
}
table {
border-collapse : collapse;
}
table th,
table td {
padding : .2em .8em;
border : 1px solid darkblue;
text-align : center;
}
table thead {
background-color : #c3e3ee;
}
table td:first-of-type {
width : 8em;
}
<p> Click a button to change its color and click again to reset! </p>
<table id="my-table">
<thead>
<tr> <th colspan="2" >My items:</th> </tr>
</thead>
<tbody>
<tr> <td contenteditable="true">Item 1</td> <td> <button>STATUS</button></td> </tr>
<tr> <td contenteditable="true">Item 2</td> <td> <button>STATUS</button></td> </tr>
<tr> <td contenteditable="true">Item 3</td> <td> <button>STATUS</button></td> </tr>
<tr> <td contenteditable="true">Item 4</td> <td> <button>STATUS</button></td> </tr>
<tr> <td contenteditable="true">Item 5</td> <td> <button>STATUS</button></td> </tr>
</tbody>
</table>
To get the reference to the current button, use the this keyword as a parameter value in the function call added inside your onclick attribute. Then use that reference to change the color.
Example:
var count = 1;
function setColor(e, color) {
e.style.backgroundColor = color;
}
<html>
<head>
<script>
</script>
</head>
<body>
<p> Click a button to change its color and click again to reset! </p>
<table class="table table-bordered table-responsive-md table-striped text-center">
<thead>
<tr>
<th class="text-center">My items:</th>
</tr>
</thead>
<tbody>
<tr>
<td contenteditable="true">Item 1</td>
<td> <input type="button" class="button" value="STATUS" style="color:black" onclick="setColor(this, '#800000')" ;/></td>
</tr>
<tr>
<td contenteditable="true">Item 2</td>
<td> <input type="button" class="button" value="STATUS" style="color:black" onclick="setColor(this, '#800000')" ;/></td>
</tr>
<tr>
<td contenteditable="true">Item 3</td>
<td> <input type="button" class="button" value="STATUS" style="color:black" onclick="setColor(this, '#800000')" ;/></td>
</tr>
<tr class="hide">
<td contenteditable="true">Item 4</td>
<td> <input type="button" class="button" value="STATUS" style="color:black" onclick="setColor(this, '#800000')" ;/></td>
</tr>
<tr>
<td contenteditable="true">Item 5</td>
<td> <input type="button" class="button" value="STATUS" style="color:black" onclick="setColor(this, '#800000')" ;/></td>
</tr>
</tbody>
</table>
</body>
</html>
This is my table html I am trying to How to include 2 columns under one column header using Jquery I tried this code:
$('#test th.column_Column1').append( $('<th/>', {text : 'HEADER BOth'}) );
But it doesn't give the desired output:
<table class="xrounded_shadowed default footable-loaded footable" id="test">
<thead>
<tr>
<th class="select_checkbox footable-visible footable-first-column" style="width: 40px;"><label><input type="checkbox" onclick="toggleAll(this)" style="float:left;"><i></i></label></th>
<th class="column_Column1 footable-visible">Column1</th>
<th class="column_Column2 footable-visible footable-last-column">Hari</th></tr></thead>
<tbody>
<tr class="odd">
<td class="select_checkbox footable-visible footable-first-column"><label><input type="checkbox" name="d-49700-checkbox_username" value=""><i></i></label></td>
<td class="column_Column1 footable-visible" style=""><span class="footable-toggle"></span>01/01/2019</td>
<td class="column_Column2 footable-visible footable-last-column" style="">Tuesday</td></tr>
<tr class="even">
<td class="select_checkbox footable-visible footable-first-column"><label><input type="checkbox" name="d-49700-checkbox_username" value=""><i></i></label></td>
<td class="column_Column1 footable-visible" style=""><span class="footable-toggle"></span>01/01/2019</td>
<td class="column_Column2 footable-visible footable-last-column" style="">Tuesday</td></tr>
<tr class="odd">
<td class="select_checkbox footable-visible footable-first-column"><label><input type="checkbox" name="d-49700-checkbox_username" value=""><i></i></label></td>
<td class="column_Column1 footable-visible" style=""><span class="footable-toggle"></span>01/01/2019</td>
<td class="column_Column2 footable-visible footable-last-column" style="">Tuesday</td></tr>
<tr class="even">
<td class="select_checkbox footable-visible footable-first-column"><label><input type="checkbox" name="d-49700-checkbox_username" value=""><i></i></label></td>
<td class="column_Column1 footable-visible" style=""><span class="footable-toggle"></span>01/01/2019</td>
<td class="column_Column2 footable-visible footable-last-column" style="">Tuesday</td></tr>
<tr class="odd">
<td class="select_checkbox footable-visible footable-first-column"><label><input type="checkbox" name="d-49700-checkbox_username" value=""><i></i></label></td>
<td class="column_Column1 footable-visible" style=""><span class="footable-toggle"></span>01/01/2019</td>
<td class="column_Column2 footable-visible footable-last-column" style="">Tuesday</td></tr></tbody></table>
Add two rows instead and the first one should have one single column that spans across all columns
<table>
<thead>
<tr>
<th colSpan="2">Column Header</th>
</tr>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
</table>
Here's a snippet with more details using jQuery to do it dynamically...
$(function(){
var $thead = $("<thead></thead>");
$thead.append("<tr><th colspan='2'>Column Header</th></tr>");
$thead.append("<tr><th>Column1</th><th>Column2</th></tr>");
$("table").append($thead);
});
table{
width: 100%;
border-collapse: collapse;
border: 1px solid #333;
}
thead{
background-color: #FFEB3B;
}
th, td{
border: 1px solid #333;
padding:4px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<table>
</table>
The colSpan and rowSpan attribute is used to do such kind of things.In this case use need to use colSpan to ur <th>. And then set its text-align:center and you will be done
th:nth-child(1) {
text-align: center;
}
th,td{
border:2px solid
}
table{
border-collapse:collapse;
}
<table>
<thead>
<tr>
<th colSpan="2">Column Header</th>
</tr>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
<tbody>
<tr>
<td>Column 1 Item</td>
<td>Column 2 Item</td>
</tr>
<tr>
<td>Column 1 Item</td>
<td>Column 2 Item</td>
</tr>
</tbody>
</thead>
</table>
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
Im using DataTables.Js in my project. I want to add a nested table after each row, but without Ajax or javascript,JUST PURE HTML. below is an example.
#example th {
background: #eeb;
border: solid 1px #eba;
}
#example td {
background: #ddd;
border: solid 1px #4a4;
}
#example table td {
background: #ccf;
border: solid 1px #555;
}
<table cellpadding="0" cellspacing="0" border="0" class="dataTable" id="example">
<thead>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>Trident</td>
<td>Internet Explorer 4.0</td>
<td>Win 95+</td>
<td>4</td>
<td>X</td>
</tr>
<tr>
<td colspan="5">
<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">
<tbody>
<tr>
<td>Full name:</td>
<td>Airi Satou</td>
</tr>
<tr>
<td>Extension number:</td>
<td>5407</td>
</tr>
<tr>
<td>Extra info:</td>
<td>And any further details here (images etc)...</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>Trident</td>
<td>Internet Explorer 5.0</td>
<td>Win 95+</td>
<td>5</td>
<td>C</td>
</tr>
</tbody>
</table>
The table renders but the sorting filters don't work. How can I go around this so that the sorting filters work and the details rows always respond to the parent row filtering?
I have an HTML TABLE:
<table id="persons" border="1">
<thead id="theadID">
<tr>
<th>Name</th>
<th>sex</th>
<th>Message</th>
</tr>
</thead>
<tbody id="tbodyID">
<tr>
<td>Viktor</td>
<td>Male</td>
<td>etc</td>
</tr>
<tr>
<td>Melissa</td>
<td>Female</td>
<td>etc</td>
</tr>
<tr>
<td>Joe</td>
<td>Male</td>
<td>etc</td>
</tr>
</tbody>
</table>
<input type="button" onclick="deleteLastColumn();" value="do it"/>
I need a javascript/jquery code, which delete the last column (message) in the table:
function deleteLastColumn() {
$("#theadID tr th:not(:last-child)......
$("#tbodyID tr td:not(:last-child)......
}
So the result should be this:
<table id="persons" border="1">
<thead id="theadID">
<tr>
<th>Name</th>
<th>sex</th>
</tr>
</thead>
<tbody id="tbodyID">
<tr>
<td>Viktor</td>
<td>Male</td>
</tr>
<tr>
<td>Melissa</td>
<td>Female</td>
</tr>
<tr>
<td>Joe</td>
<td>Male</td>
</tr>
</tbody>
</table>
I know there is the ":not(last)" method, but I can't find any example to my problem.
Could anyone help me?
Try
$('#persons tr').find('th:last-child, td:last-child').remove()
Demo: Fiddle
You can use this solution to achieve it easily..
function myFunction() {
var allRows = document.getElementById('my_table').rows;
for (var i=0; i< allRows.length; i++) {
allRows[i].deleteCell(-1);
}
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table id="my_table">
<thead >
<th>Column 1</td>
<th>Column 2</td>
<th>Column 3</td>
</thead >
<tr >
<td>Number 1</td>
<td>String 1</td>
<td>Decimal 1</td>
</tr>
<tr >
<td>Number 2</td>
<td>String 2</td>
<td>Decimal 2</td>
</tr>
<tr >
<td>Number 3</td>
<td>String 3</td>
<td>Decimal 3</td>
</tr>
</table><br>
<button onclick="myFunction()">Remove Last Column</button>
</body>
</html>
In addition to Arun P Johny's answer,
That would let you remove last row each time you click the button. If you just want to remove one column, not others you may try this.
function deleteLastColumn() {
$(document).find('.last').remove()
}
after adding class last to the last td and th of the table.
Demo : Fiddle