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.

get all the values of a column in a table

I have the table and with fields id,name,geo,age I want to collect name,id and age of the table which have the geo ME.
name= ["a","b","c"]
id= ["1","2","3"]
age =["30","20","42"]
$(document).ready(function(){
/*$(#geo tbody).find('tr').each(function( index ){
console.log($(this).find(td:1));
}); */
name= new Array();
$('#geo tbody').find('tr').each(function( ) {
// console.log($( this).find(':nth-child(3)').text());
if ($( this).find(':nth-child(3)').text()=='ME'){
val= $( this).find(':nth-child(2)').text() ;
name=$( this).find(':nth-child(2)').text() ;
}
//console.log(name);
});
console.log(name);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="geo">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>geo</th>
<th>age</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>a</td>
<td>ME</td>
<td>20</td>
</tr>
<tr>
<td>2</td>
<td>b</td>
<td>ME</td>
<td>30</td>
</tr>
<tr>
<td>3</td>
<td>c</td>
<td>ME</td>
<td>42</td>
</tr>
<tr>
<td>4</td>
<td>d</td>
<td>USA</td>
<td>20</td>
</tr>
<tr>
<td>5</td>
<td>e</td>
<td>UK</td>
<td>22</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
I want to insert the value in array .now I can get only the last data.how to push the value in an array in each loop

You can simply use .push to push values inside arrays.
Demo Code :
$(document).ready(function() {
var age =[];
var name = [];
var id = [];
$('#geo tbody').find('tr').each(function() {
if ($(this).find(':nth-child(3)').text() == 'ME') {
id.push($(this).find(':nth-child(1)').text());//push same
name.push($(this).find(':nth-child(2)').text());
age.push($(this).find(':nth-child(4)').text())
}
});
console.log(name);
console.log(id);
console.log(age);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="geo">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>geo</th>
<th>age</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>a</td>
<td>ME</td>
<td>20</td>
</tr>
<tr>
<td>2</td>
<td>b</td>
<td>ME</td>
<td>30</td>
</tr>
<tr>
<td>3</td>
<td>c</td>
<td>ME</td>
<td>42</td>
</tr>
<tr>
<td>4</td>
<td>d</td>
<td>USA</td>
<td>20</td>
</tr>
<tr>
<td>5</td>
<td>e</td>
<td>UK</td>
<td>22</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>

Firstly, you need to add var in name = new Array();:
var name = new Array();
Next, you need to use the .push() function to add data to the array:
name.push($(this).find(':nth-child(2)').text());

Here is an example of plain JavaScript version ....
const id = [];
const name = [];
const age = [];
// get the tr in the tbody
document.querySelectorAll('#geo tbody tr').forEach(tr => {
id.push(tr.children[0].textContent);
name.push(tr.children[1].textContent);
age.push(tr.children[3].textContent);
});
console.log(id, name, age);
<table id="geo">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>geo</th>
<th>age</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>a</td>
<td>ME</td>
<td>20</td>
</tr>
<tr>
<td>2</td>
<td>b</td>
<td>ME</td>
<td>30</td>
</tr>
<tr>
<td>3</td>
<td>c</td>
<td>ME</td>
<td>42</td>
</tr>
<tr>
<td>4</td>
<td>d</td>
<td>USA</td>
<td>20</td>
</tr>
<tr>
<td>5</td>
<td>e</td>
<td>UK</td>
<td>22</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>

How do I enter a numeric number in sequence in a table?

There is a table that is sorted by clicking from larger to smaller values. How to make sure that the ordinal number of the value is always between 1 and 5 after sorting the table?
That is, the numerical order should always be between 1 and 5 and should not be sorted.
$(document).ready(function() {
var $table = $('#simpleTable').stupidtable();
$table.find('thead th[data-sort]').on('click', function() {
$(this).eq(0).stupidsort();
});
});
<table id="simpleTable">
<thead>
<tr>
<th data-sort="int">#</th>
<th data-sort="int">int</th>
<th data-sort="float">float</th>
<th data-sort="string">string</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>15</td>
<td>18</td>
<td>banana</td>
</tr>
<tr>
<td>2</td>
<td>95</td>
<td>36</td>
<td>coke</td>
</tr>
<tr>
<td>3</td>
<td>2</td>
<td>152.5</td>
<td>apple</td>
</tr>
<tr>
<td>4</td>
<td>53</td>
<td>88.5</td>
<td>zebra</td>
</tr>
<tr>
<td>5</td>
<td>195</td>
<td>858</td>
<td>orange</td>
</tr>
</tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stupidtable/1.1.3/stupidtable.min.js"></script>

Never heard of - and therefore never used - stupidtable but it doesn't look like there is a call-back event once the sorting has completed.
So instead, I've used a timeout as part of the click event.
The within the timeout finds all the first-child <td> elements, and uses the index of each to set the text of the element.
As the stupidsort code does the sort 10-milliseconds after the client event, I've had to make it 20 in the code for it to work...
$(function() {
var $table = $('#simpleTable').stupidtable();
$table.find('thead th[data-sort]').on('click', function() {
$(this).eq(0).stupidsort();
// After a short period, set the values
setTimeout(function() {
$table.find("tbody tr td:first-child").each(function(i, v) {
$(this).text((i + 1).toString());
});
}, 20);
});
});
<table id="simpleTable">
<thead>
<tr>
<th data-sort="int">#</th>
<th data-sort="int">int</th>
<th data-sort="float">float</th>
<th data-sort="string">string</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>15</td>
<td>18</td>
<td>banana</td>
</tr>
<tr>
<td>2</td>
<td>95</td>
<td>36</td>
<td>coke</td>
</tr>
<tr>
<td>3</td>
<td>2</td>
<td>152.5</td>
<td>apple</td>
</tr>
<tr>
<td>4</td>
<td>53</td>
<td>88.5</td>
<td>zebra</td>
</tr>
<tr>
<td>5</td>
<td>195</td>
<td>858</td>
<td>orange</td>
</tr>
</tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stupidtable/1.1.3/stupidtable.min.js"></script>

d3.js : get td value

I am new with d3.js
The problem i am facing is that i am unsure of how to get the value of td.
html
<table class="table">
<thead><tr>
<th>S No</th>
<th>Name</th>
<th>Credit</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td>Arun</td>
<td>Positive</td>
</tr>
<tr>
<td>3</td>
<td>Mickey</td>
<td>Negetive</td>
</tr>
<tr>
<td>4</td>
<td>Zack</td>
<td>Positive</td>
</tr>
</tbody>
I read the documentation on d3.js but i couldnt find the documentation on how can i retrieve data from the table .
Let's say that i would want to append a div with background color (green) on Credit that has value of negetive , how could we achieve this
This is what i tried
let selection = d3.selectAll("tr")
console.log("Get Table " + selection)
let headerElement = selection.nodes()[0];
let output = selection.selectAll("td")
i tried to printout the value of selected column with console.log(output["0"][1])
but i am receving error.
Thank you in advance

Since D3 v4 selections are objects, not arrays anymore, so you cannot treat them like you did in output["0"][1].
The idiomatic way to loop a selection is using selection.each. For instance:
const tds = d3.selectAll("td")
.each(function() {
console.log(d3.select(this).text());
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<table class="table">
<thead>
<tr>
<th>S No</th>
<th>Name</th>
<th>Credit</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td>Arun</td>
<td>Positive</td>
</tr>
<tr>
<td>3</td>
<td>Mickey</td>
<td>Negetive</td>
</tr>
<tr>
<td>4</td>
<td>Zack</td>
<td>Positive</td>
</tr>
</tbody>
If you don't want another selection, d3.select(this).text() is the same of this.innerHTML.
Therefore, you can use the same each to set the "background color (green) on Credit that has value of negetive", as you said:
const tds = d3.selectAll("td")
.each(function() {
d3.select(this).style("background-color", this.innerHTML === "Positive" ? "green" : null)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<table class="table">
<thead>
<tr>
<th>S No</th>
<th>Name</th>
<th>Credit</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td>Arun</td>
<td>Positive</td>
</tr>
<tr>
<td>3</td>
<td>Mickey</td>
<td>Negetive</td>
</tr>
<tr>
<td>4</td>
<td>Zack</td>
<td>Positive</td>
</tr>
</tbody>

How to hide table rows if Id = id

I have a table here that I am trying to hide table row if the patient ID = patient ID. The table is loaded dynamically with XML. I will provide an example here.
<table class="table">
<thead>
<tr>
<td>Patient ID</td>
<td>Name</td>
<td>Reason for visit</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Christian</td>
<td>Cold</td>
</tr>
<tr>
<td>1</td>
<td>Christian</td>
<td>Checkup</td>
</tr>
<tr>
<td>2</td>
<td>Suzy</td>
<td>Cold</td>
</tr>
<tr>
<td>3</td>
<td>John</td>
<td>Cold</td>
</tr>
<tr>
<td>3</td>
<td>John</td>
<td>Blood Test</td>
</tr>
<tr>
<td>4</td>
<td>Mary</td>
<td>Ankle</td>
</tr>
<tr>
<td>5</td>
<td>Alex</td>
<td>Cold</td>
</tr>
</tbody>
</table>
So the rows where id = 1 and where id = 3 both have multiple rows. I want to only display one row and hide the other 3 unless i double click the row then it will display the 2,3,4,5 rows etc.
so this will be the end result:
<table class="table">
<thead>
<tr>
<td>Patient ID</td>
<td>Name</td>
<td>Reason for visit</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Christian</td>
<td>Cold</td>
</tr>
<tr>
<td>2</td>
<td>Suzy</td>
<td>Cold</td>
</tr>
<tr>
<td>3</td>
<td>John</td>
<td>Cold</td>
</tr>
<tr>
<td>4</td>
<td>Mary</td>
<td>Ankle</td>
</tr>
<tr>
<td>5</td>
<td>Alex</td>
<td>Cold</td>
</tr>
</tbody>
</table>
and when you double click the row it will switch the css to display the hidden rows.

Use JavaScript to iterate over all rows in the table. If any have the
same ID as a previous row then set the style to display: 'none'.
Add an event listener to each row that listens for double clicks. On a double click check the row's next sibling. If it has the same ID as the current row then set its style to display:'table-cell'.
var ids = [],
rows = document.querySelectorAll( '.table tr' )
Array.from( rows ).forEach( row => {
var rowID = row.querySelector( 'td:first-child' ).innerHTML
if ( !ids.includes( rowID ) )
ids.push( rowID )
else
row.style.display = 'none'
row.addEventListener( 'dblclick', () => {
var next = row.nextElementSibling,
nextID = ( next ? next.querySelector( 'td:first-child' ).innerHTML : null )
if ( nextID = rowID )
next.style.display = 'table-row'
} );
} )
<table class="table">
<thead>
<tr>
<td>Patient ID</td>
<td>Name</td>
<td>Reason for visit</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Christian</td>
<td>Cold</td>
</tr>
<tr>
<td>1</td>
<td>Christian</td>
<td>Checkup</td>
</tr>
<tr>
<td>2</td>
<td>Suzy</td>
<td>Cold</td>
</tr>
<tr>
<td>3</td>
<td>John</td>
<td>Cold</td>
</tr>
<tr>
<td>3</td>
<td>John</td>
<td>Blood Test</td>
</tr>
<tr>
<td>4</td>
<td>Mary</td>
<td>Ankle</td>
</tr>
<tr>
<td>5</td>
<td>Alex</td>
<td>Cold</td>
</tr>
</tbody>
</table>