Hide all <table> when load a website - javascript

I have total 15 table on my web page. I need to hide all of this when loading this page.
I am trying to do this like:
but it's not working. anyone can help me, please?
window.onload = function() {
var tableEL = $("table");
for (var i = 0; i < tableEL.length; i++) {
tableEL[i].hide();
}
};

Try this:
window.onload = function() {
$("table").hide();
};
It will hide all table presented on the page.

You are missing $ while selecting the table inside the loop.
window.onload = function() {
var tableEL = $("table");
for (var i = 0; i < tableEL.length; i++) {
$(tableEL[i]).hide();
}
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>1</td>
</tr>
</table>
<table>
<tr>
<td>1</td>
</tr>
</table>
<table>
<tr>
<td>1</td>
</tr>
</table>
<table>
<tr>
<td>1</td>
</tr>
</table>
<table>
<tr>
<td>1</td>
</tr>
</table>
You can also use CSS to hide the tables
table{
display:none;
}

Use jQuery.
$(function(){
$("table").hide(); // this will execute after loading the page
});

$(document).ready(function() {
$('table').hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table><tr><td>1</td></tr></table>
<table><tr><td>2</td></tr></table>
<table><tr><td>3</td></tr></table>
<table><tr><td>4</td></tr></table>
$('table').hide(); in jQuery will have this effect. Make sure you do it after the document is fully loaded or the tables will not be loaded into the DOM and then jQuery will try to hide the tables before they exist.

$(document).load(function(){
$('table').hide();
});

Related

How to set style after loading a value from localStorage?

I want to load a value from localStorage and then at page load set a style='display:none' or not on a table row.
One possibility I see is:
<script>
if(localStorage.getItem('test') == 'aja')
{
document.write('<tr style="display:none">');
}else{
document.write('<tr>');
}
</script>
but that doesn't seem to be a good solution as the editor doesn't recogize this and is then complaning about the missing
I could also hide it at after page load - but then it is visible for a split second before it is hidden - not ideal.
I am somewhat missing the possiblity to directly use variables in the html code itself. Like Razor / c# is doint it
#var hiddenOrNot = 'none';
<tr style="display:#hiddenOrNot">
but that is loaded on the server side, so no possibility to get the localStorage value...
Any suggestion? jquery or javascript
Thanks a lot
Something like this perhaps.
Select the row that needs to be removed if condition true
Create a class that contains style display:none
Add class to row if condition true
let tr = document.querySelector(".testRow");
let localStorageItem = localStorage.getItem("test") || "";
tr.classList.add((localStorageItem === 'aja') ? "hideRow" : null);
.hideRow {
display: none
}
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr class="testRow">
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Edit: error on console here is due to StackOverFlow not allowing access to localStorage, should work fine on your system
You can try to set tr to display: none by default,and if localStorage.getItem('test') != 'aja' remove it.So that it will not be visible for a split second before it is hidden.Here is a demo:
view:
<table>
<thead>
<tr class="hidden">
<td>Id</td>
<td>Name</td>
</tr>
</thead>
<tbody>
<tr class="hidden">
<td>1</td>
<td>Name1</td>
</tr>
<tr class="hidden">
<td>2</td>
<td>Name2</td>
</tr>
</tbody>
</table>
css:
<style>
.hidden {
display: none
}
</style>
js:
<script>
$(document).ready(function () {
if (localStorage.getItem('test') != 'aja') {
$("tr").removeClass();
}
});
</script>

Make the whole row as a link with JS / jQuery

I want to achieve this situation with Javascript / jQuery. I want to write code that will use this a href and wrap-around tr
This is an example:
<tr>
<td>122880</td>
<td>John</td>
<td>Doe</td>
<td>More</td>
</tr>
I want to achieve this:
<tr data-href="/preson/details/42838">
<td>122880</td>
<td>John</td>
<td>Doe</td>
<td>More</td>
</tr>
Can anybody try to help me with this:
UPDATE
var elements = document.querySelectorAll('tr a');
Array.prototype.forEach.call(elements, function (el) {
el.href = el.href;
var new = document.querySelectorAll('tr');
Array.prototype.forEach.call(new, function (e) {
e.href= e.href.prop("data-href", el.href)
});
With jQuery, it's as simple as :
$("tr").each( function() {
const $tr = $(this);
$tr.attr("data-href", $tr.find("a").attr("href"));
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>122880</td>
<td>John</td>
<td>Doe</td>
<td>More</td>
</tr>
</tbody>
</table>

How to hide a whole a <div> if table <td> tag is is empty or null?

Currently I am using thymeleaf as a view. I am trying to hide my div if all of my table tags are null or empty. If it is not empty then show the div that will show the table.
Simple Html :
<div id= "myTable1div">
<h3> Test table </h3>
<table id="Table1">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr th:each="data, iterStat : ${hostlist}">
<td th:text = "${data.host}"></td>
<td th:text = "${data.id}"></td>
<td th:text = "${data.number}"></td>
</tr>
</tbody>
</table>
</div>
How can I write a javascript, css or Jquery if td is null hide this div?
Basically this would show a table with a header. But if the tags are null it should be just a blank page. Showing nothing that is inside the tag.
You could check if one of td's are empty or null in the ready function using each() method then hide the div using hide() :
$(function(){
var hide = true;
$('#Table1 td').each(function(){
var td_content = $(this).text();
if(td_content!=""){
hide = false;
}
})
if(hide){
$('#myTable1div').hide();
}
})
Hope this helps.
Two empty td's case :
$(function(){
var hide = true;
$('#Table1 td').each(function(){
var td_content = $(this).text();
if(td_content!=""){
hide = false;
}
})
if(hide){
$('#myTable1div').hide();
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myTable1div">
<table id="Table1">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td></td>
<td></td>
<td>number</td>
</tr>
</table>
</div>
All td's are empty case :
$(function(){
var hide = true;
$('#Table1 td').each(function(){
var td_content = $(this).text();
if(td_content!=""){
hide = false;
}
})
if(hide){
$('#myTable1div').hide();
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myTable1div">
<table id="Table1">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
Although all the answers here would probably work, they are all tightly coupled (a simple html change will most like stop the javascript code from working as intended) and not reusable. I would recommend reading Decoupling Your HTML, CSS, and JavaScript - Philip Walton # Google Engineer.
If I were to write this, it would probably look a little bit like:
<div id= "myTable1div" class="js-hide-onallempty">
<table id="Table1">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td class="js-hide-onallempty-data">${data.host}</td>
<td class="js-hide-onallempty-data">${data.id}</td>
<td class="js-hide-onallempty-data">${data.number}</td>
</tr>
</table>
</div>
jQuery:
$(document).ready(function(){
$(".js-hide-onallempty").each(function(){
var $hide = $(this);
var isHidden = true;
$hide.find('.js-hide-onallempty-data').each(function(){
isHidden = $(this).text().trim().length == 0;
return isHidden; // if any element has text then this return false
// and breaks the loop
});
$hide.toggle(isHidden);
});
});
I see you are printing the variables ${data.host}.
Why not check if ${data.host} is empty. if so do not display the table.
In jQuery this can be done as
if(typeof data.host === undefined || data.host === '' || data.host === null)
$("#Table1").hide();
else
// display the table with the data
In vanilla js it can be done like this
if(typeof data.host === undefined || data.host === '' || data.host === null)
$(document.querySelector("#Table1")).style.display = "none";
else
// display the table with the data

Add data attribute with value from self

I've got a table to which I'd like to add a attribute 'data-order' to every last child of every row. See the table below.
<table id="table_id" class="display">
<tbody>
<tr>
<td>Test</td>
<td>255 500</td>
</tr>
</tbody>
</table>
I'd like to add the value of the last td to the attribute.
Before : <td>255 500</td>
After : <td data-order"255 500">255 500</td>
I use $(this).text() to get the value from the td but it doesn't seem to work the way I thought. I get weird data with multiple table rows included. I use this Javascript code to add the attribute.
$(document).ready(function() {
$( '#table_id tbody tr td:last-child').attr( 'data-order', $(this).text());
});
</script>
What is wrong my code ? Thanks.
At this point this doesn't refer to your $( '#table_id tbody tr td:last-child')
I think you must declarate a var, something like this could help you
var $MyObject = $( '#table_id tbody tr td:last-child');
$MyObject.attr( 'data-order', $MyObject.text());
if you have multiple line in you table you could use this in a each loop.
Example case
<table id="table_id" class="display">
<tbody>
<tr>
<td>Test</td>
<td>255 500</td>
</tr>
<tr>
<td>Test1</td>
<td>255 5001</td>
</tr>
<tr>
<td>Test2</td>
<td>255 500</td>
</tr>
</tbody>
</table>
$( '#table_id tbody tr td:last-child').each(function(){
var $MyObject = $(this); // this here referer to the current object of the loop
$MyObject.attr( 'data-order', $MyObject.text());
});
You can do it like this
var lastTd = $( '#table_id tbody tr td:last-child');
lastTd.attr( 'data-order', lastTd.html());
Please take a look at below code snippet:
$(document).ready(function() {
$( '#table_id tbody tr').each(function(){
$(this).find('td:last-child').attr( 'data-order', $(this).find('td:last-child').text());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table id="table_id" class="display">
<tbody>
<tr>
<td>Test</td>
<td>255 500</td>
</tr>
<tr>
<td>Test1</td>
<td>2551 5001</td>
</tr>
<tr>
<td>Test2</td>
<td>2552 5002</td>
</tr>
</tbody>
</table>
Used to .each function as like this
$(document).ready(function(){
$('#table_id tr td:last-child').each(function(){
var thisText = $(this).text();
$(this).attr('data-order',thisText);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table id="table_id" class="display">
<tbody>
<tr>
<td>Test</td>
<td>255 500</td>
</tr>
<tr>
<td>Test</td>
<td>255 500</td>
</tr>
</tbody>
</table>
$(document).ready(function () {
$('#table_id tr td:last-child').each(function () {
$(this).attr('data-order', $(this).text());
});
});
You can simply use the data()
$('#table_id tr td:last-child').each(function(){
var text= $(this).text();
$(this).data('order',text);
});

filter the html table data using jquery

<table class="table table-hover">
<thead>
<tr><th> Block</th>
<th>Size</th></tr>
</thead>
<tbody id="poolTable" class="tbody">
<tr>
<td>78</td>
<td>18</td>
</tr>
<tr>
<td>52</td>
<td>21</td>
</tr>
<tr>
<td>54</td>
<td>19</td>
</tr>
</tbody>
</table>
Hi, I want to filter the html table data by using jquery,
can anyone try to resolve this please!!
Please try bellow JavaScript for to get content of each td
$("#filter").keyup(function(){
var filter = $(this).val();
$("#poolTable > tr").each(function(e){
cells = this.cells;
for(i=0; i< cells.length; i++){
alert(cells[i].innerHTML);
}
});
})
function filter(){
var text = $('#search').val();
$('#poolTable tr').show();
if (text != "") {
$('#poolTable tr td.number').each(function() {
if ($(this).text().indexOf(text) >= 0) {
$(this).parent().show();
return true;
} else {
$(this).parent().hide();
}
});
This works. Here number is the class name of td. It only filters the single column.
You can try this
https://sunnywalker.github.io/jQuery.FilterTable/
It is a jQuery plugin that will allow you to filter your table.

Categories