We Keep Coding

I want to show the user only 3 columns in UI, But want to Export all table data to excel, So how can I hide the column based on the header text?

This is My Table; I want to show only first 3 columns to User but I want to export all data to Excel. First how can I hide the columns based on the header text ?
<table id="ibms" class="table table-bordered">
<thead>
<tr>
<th>IBMS Code</th>
<th>Location Description</th>
<th>FMS Location Code</th>
<th>FMS Location Description</th>
<th>Site</th>
<th>Level</th>
<th>Area</th>
<th>Zone</th>
<th>Unit</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<tr>
<td>IB-0078</td>
<td>Hello</td>
<td>542</td>
<td>Description here</td>
<td>Industry</td>
<td>1</td>
<td>Arizona</td>
<td>five</td>
<td>2</td>
<td>USA</td>
</tr>
<tr>
<td>IB-552</td>
<td>World</td>
<td>576</td>
<td>Description here</td>
<td>Textile</td>
<td>2</td>
<td>Texas</td>
<td>one</td>
<td>10</td>
<td>USA</td>
</tr>
</tbody>
</table>
JS code:
var hidecolumns = $("#ibms").DataTable();
function locationhie(hidecolumns){
var u = $("th:contains(FMS Location Description)").index();
hidecolumns.column(u).visible( false );
}
function locationhieSite(hidecolumns){
var a = $("th:contains(Site)").index();
hidecolumns.column(a).visible( false );
}
function locationhielevel(hidecolumns){
var b = $("th:contains(Level)").index();
hidecolumns.column(b).visible( false );
}
function locationhieArea(hidecolumns){
var c = $("th:contains(Area)").index();
hidecolumns.column(c).visible( false );
}
function locationhieZone(hidecolumns){
var d = $("th:contains(Zone)").index();
hidecolumns.column(d).visible( false );
}
function locationhieUnit(hidecolumns){
var e = $("th:contains(Unit)").index();
hidecolumns.column(e).visible( false );
}
function locationhieLocation(hidecolumns){
var f = $("th:contains(Location)").index();
hidecolumns.column(f).visible( false );
}
Can Anyone help me how to achieve this ? Is there any alternative solutions available to do this in a single function?

You can use CSS :nth-child pseudo-class selector to hide some columns, no JS needed:
.locations td:nth-child(n+4),
.locations th:nth-child(n+4) {
display: none;
}
<table id="ibms" class="table table-bordered locations">
<thead>
<tr>
<th>IBMS Code</th>
<th>Location Description</th>
<th>FMS Location Code</th>
<th>FMS Location Description</th>
<th>Site</th>
<th>Level</th>
<th>Area</th>
<th>Zone</th>
<th>Unit</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<tr>
<td>IB-0078</td>
<td>Hello</td>
<td>542</td>
<td>Description here</td>
<td>Industry</td>
<td>1</td>
<td>Arizona</td>
<td>five</td>
<td>2</td>
<td>USA</td>
</tr>
<tr>
<td>IB-552</td>
<td>World</td>
<td>576</td>
<td>Description here</td>
<td>Textile</td>
<td>2</td>
<td>Texas</td>
<td>one</td>
<td>10</td>
<td>USA</td>
</tr>
</tbody>
</table>
.locations td:nth-child(n+4) selects any td element within an element of .locations class starting from the index of 4. Indices are calculated from the first occurence of td in its parent, and the first index is 1.

How can I put another content under each row in my table? [duplicate]

This question already has answers here:
Hide div by default and show it on click with bootstrap
(4 answers)
Closed 1 year ago.
I Googled a lot but I can't find something for my case. I have a Bootstrap table where I want on click on my rows to show additional info for the main row.
I can't find a way to do this.
I have this code:
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
And if I try this:
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
<div class="additionl-info">
<p>Some additional info for the first row...</p>
</div>
</tr>
</tbody>
</table>
Then my table is broken.
How can I achieve this - on click show additional info for each of my rows?

Add another <tr> after the current one with a colspan which spans all columns and then put another <td> with a <table> therein.
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
</tr>
<tr>
<td colspan="3">
<table>...</table>
</td>
</tr>
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
</tr>
The new table will then appear between the rows.

how to make bootstrap table clickable

I have a bootstrap like this in main.html page:
<table class="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
My requirement is:
When I click on any row of the table( either on the text or even in the space between two columns) it has to redirect to another Html page.
how can I do that?

try this code
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<table class="table table-striped" id="tableId">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
<script>
function addRowHandlers() {
var table = document.getElementById("tableId");
var rows = table.getElementsByTagName("tr");
for (i = 0; i < rows.length; i++) {
var currentRow = table.rows[i];
var createClickHandler =
function(row)
{
return function() {
var cell = row.getElementsByTagName("td")[0];
var id = cell.innerHTML;
alert("id:" + id);
window.location.href = "http://www.w3schools.com";
};
};
currentRow.onclick = createClickHandler(currentRow);
}
}
window.onload = addRowHandlers();
</script>
</body>
</html>

You can also achieve this by using Javascript on tr (inline) :
<tr onclick="document.location = 'links.html';">
In this way you can set different links for different rows. Please check below updated HTML snippet :
<table class="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr onclick="document.location = 'http://www.google.com';">
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr onclick="document.location = 'http://www.himanshu.com';">
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr onclick="document.location = '/links.html';">
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>

Please find below the code that will redirect you to another link on click of any rows (except header row)
Add click event on all the rows inside the table body and execute your task.
$(function() {
$('tbody tr').click(function() {
window.location.href = 'https://www.google.com';
})
})
)

First, i suggest to add class to <tr> tag (so if you plan to have multiple tables in page it does not affect other table)
Then, i assume your using jquery and you have dynamic table rows.
#.link is the class <tr class="link" data-href="https://google.com">...</tr>
#:not(a) => added this so you can add other link `<a>` to your row (remove it if not needed...)
// same page redirect
$(document).on('click', 'tr.link:not(a)', function(e){
e.stopPropagation(); // only add this if you have <a> tag in row
window.location.href = $(this).data('href'); // dynamic link
});
// new tab redirect
$(document).on('click', 'tr.link', function(){
$('External Link')[0].click();
});

It can be done using jQuery. Bind an event listener on click of TR and then redirect the user as needed.
Your HTML
<table class="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
jQuery Code
$(function() {
$('tr').on('click', function() {
document.location.href = 'https://google.com';
});
});
Plain JavaScript
var table = document.getElementById('js-table');
for(var i = 0; i < table.rows.length; i++) {
table.rows[i].addEventListener('click', function() {
document.location.href = "https://google.com"
});
}

How to fixed thead with the plugin jscrolpane?

Who knows what the problem is? I want to combine the table and jscrollpane, when I start to use this plug-in everything breaks, it is impossible to fix thead. Someone faced with this? If you delete the class scroll-pane, then everything works correctly, only without the scroll styles.
It seems impossible to me. Can eat any bypass ways?
$(document).ready(function () {
window.onload = function(){
var tableCont = document.querySelector('#table-cont')
function scrollHandle (e){
var scrollTop = this.scrollTop;
this.querySelector('thead').style.transform = 'translateY(' + scrollTop + 'px)';
}
tableCont.addEventListener('scroll',scrollHandle)
};
$('.scroll-pane').jScrollPane({
showArrows: false,
contentWidth: '0px',
autoReinitialise: true
}).bind(
'mousewheel',
function(e)
{
e.preventDefault();
}
);
});
.table-cont{
max-height: 170px;
overflow: auto;
background: #ddd;
margin: 20px 10px;
box-shadow: 0 0 1px 3px #ddd;
}
thead{
background-color: #ddd;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/jScrollPane/2.2.0/style/jquery.jscrollpane.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jScrollPane/2.2.0/script/jquery.jscrollpane.js"></script>
<h1 >132 qwe 123qwe </h1>
<div class='table-cont scroll-pane' id='table-cont'>
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
<tr>
<th scope="row">5</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
<tr>
<th scope="row">6</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
<tr>
<th scope="row">7</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
<tr>
<th scope="row">8</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
<tr>
<th scope="row">9</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
<tr>
<th scope="row">10</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
<tr>
<th scope="row">11</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
<tr>
<th scope="row">12</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
<tr>
<th scope="row">13</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
</div>

With some CSS overrides and tweaking, we can make it appear as if it is all the same table. The trick is, use a separate table for the head and body:
$(document).ready(function () {
window.onload = function(){
var tableCont = document.querySelector('#table-cont')
function scrollHandle (e){
var scrollTop = this.scrollTop;
this.querySelector('thead').style.transform = 'translateY(' + scrollTop + 'px)';
}
tableCont.addEventListener('scroll',scrollHandle)
};
$('.scroll-pane').jScrollPane({
showArrows: false,
contentWidth: '0px',
autoReinitialise: true
}).bind(
'mousewheel',
function(e)
{
e.preventDefault();
}
);
});
.table-cont{
max-height: 170px;
overflow: auto;
background: #ddd;
margin: 20px 10px;
box-shadow: 0 0 1px 3px #ddd;
}
.table-head{
background-color: #ddd;
margin-left: 9.5px;
margin-bottom: -18px;
width: 97%;
display: block;
box-shadow: 0 0 1px 3px #ddd;
}
table th, table td{
min-width: 80px;
text-align: left;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/jScrollPane/2.2.0/style/jquery.jscrollpane.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jScrollPane/2.2.0/script/jquery.jscrollpane.js"></script>
<h1 >132 qwe 123qwe </h1>
<table class="table table-striped table-head">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
</table>
<div class='table-cont scroll-pane' id='table-cont'>
<table class="table table-striped">
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
<tr>
<th scope="row">5</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
<tr>
<th scope="row">6</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
<tr>
<th scope="row">7</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
<tr>
<th scope="row">8</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
<tr>
<th scope="row">9</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
<tr>
<th scope="row">10</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
<tr>
<th scope="row">11</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
<tr>
<th scope="row">12</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
<tr>
<th scope="row">13</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
</div>

Add Item to Table - HTML/CSS/JS

Let's say I have a dropdown (or combobox) and it has list of things. Once I select one thing from the list, it will automatically add to Table. How would I do that? Possible it is only HTML/JS?
Dropdown:
<select class="combobox form-control" style="display: none;">
<option value="" selected="selected">Point Guard</option>
<option value="CP3">Chris Paul (93)</option>
</select>
Table:
<table class="table">
<thead>
<tr>
<th>Position</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
</tr>
</tbody>
</table>
Thanks.

Using jQuery:
$('.combobox').change(function(e) {
var selectedVal = $(this).val();
$('.table').append('<tr><td>' + selectedVal + '</td></tr>');
});
I hope you get the idea.

Please try with the below code snippet.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function () {
$(".combobox").change(function () {
var temp1 = $(".combobox option:selected").text().split(' ');
$('.table tr:last').after('<tr><td>' + $('.table tr').length + '</td><td>' + temp1[0] + '</td><td>' + temp1[1] + '</td></tr>');
});
});
function removeItem() {
$('.table tbody tr:first').remove();
//.eq() -- You can also use this to fetch nth row
}
</script>
</head>
<body>
<select class="combobox form-control">
<option value="" selected="selected">Point Guard</option>
<option value="CP3">Chris Paul (93)</option>
</select>
<button onclick="removeItem()">Remove First Row</button>
<table class="table">
<thead>
<tr>
<th>Position</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
</tr>
</tbody>
</table>
</body>
</html>