Change HTML table style from Javascript function? - javascript

I have this table:
<table id="classTable" style="width:40%">
<tr>
<td>WCOB 2053: Business Foundations</td>
<td>MWF 10:45am</td>
</tr>
<tr>
<td>MATH 2043C: Survey of Calculus</td>
<td>MW 12:55pm</td>
</tr>
<tr>
<td>ISYS 2103: Business Information Systems</td>
<td>MW 4:30pm</td>
</tr>
<tr>
<td>ISYS 2263: Principles of Information Systems</td>
<td>TTh 9:30am</td>
</tr>
<tr>
<td>CSCE 3193: Programming Paradigms</td>
<td>TTh 11:00am</td>
</tr>
<tr>
<td>SCMT 2103: Introduction to Supply Chain Management</td>
<td>TTh 6:00pm</td>
</tr>
I want to control the visibility of this table with a button that calls a function so I think I need to be using
style="display:none";
but how do I change this in the function? I'm assuming something like
document.getElementById("classTable").style.display = "none";
but I can't find a documentation for this anywhere.


you could do something like this on your button:
<button onclick="myFunction()">Click me</button>
<script>
function myFunction() {
document.getElementById("classTable").style.display = "none";
}
</script>


var show = true;
var table = document.getElementById('classTable');
var toggleTable = function()
{
table.style.display = show ? 'none' : 'block';
show = !show;
}
<table id="classTable" style="width:40%">
<tr>
<td>WCOB 2053: Business Foundations</td>
<td>MWF 10:45am</td>
</tr>
<tr>
<td>MATH 2043C: Survey of Calculus</td>
<td>MW 12:55pm</td>
</tr>
<tr>
<td>ISYS 2103: Business Information Systems</td>
<td>MW 4:30pm</td>
</tr>
<tr>
<td>ISYS 2263: Principles of Information Systems</td>
<td>TTh 9:30am</td>
</tr>
<tr>
<td>CSCE 3193: Programming Paradigms</td>
<td>TTh 11:00am</td>
</tr>
<tr>
<td>SCMT 2103: Introduction to Supply Chain Management</td>
<td>TTh 6:00pm</td>
</tr>
</table>
<button onclick="toggleTable()">Toggle table</button>
table.style.display = 'none'; works perfectly fine!

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>

Can anyone help me convert a table such as this example into a dynamic one in Javascript by using the for loop?

Can anyone help me learn how to convert an HTML table into a dynamic Javascript table using the for loop? This is an example I found in my book and wanted to see how I could go about doing this.
Heading There is sections of the table that need to have the rows combined and he columns combined. I have been struggling with this for some time. Any help would be appreciated. I did not include the CSS portion of the code only the table.
<html>
<body>
<table class="table">
<tr>
<th colspan= "3" class= "MH">Conversion Tables</th>
</tr>
<tr>
<th rowspan="3" class="heading1">Meters to
<br />Feet</th>
<td>1 meter</td>
<td>3.28 feet</td>
</tr>
<tr class="difrow">
<td>50 meters</td>
<td>164.04 feet</td>
</tr>
<tr>
<td>100 meters</td>
<td>328.08 feet</td>
</tr>
<tr class="difrow">
<th rowspan="3" class="heading1">Kilometers to
<br />Miles</th>
<td>1 kilometer</td>
<td>0.62 miles</td>
</tr>
<tr>
<td>50 kilometers</td>
<td>31.07 miles</td>
</tr>
<tr class="difrow">
<td>100 kilometers</td>
<td>62.14 miles</td>
</tr>
</table>
</body>
</html>

you can add id attribute to table tag then call a javascript method on page load:
<table class="table" id="tableId">
function createRows(){
var items = "<tr><td></td></tr>...";
document.getElementById("tableId").innerHTML = items;
}
in javascript method you can use for to generate table rows.

How can I search in a HTML table without using any mysql queries, just a plain javascript or jquery to be specific?

About this problem, I saw a some solution here at Stack Overflow and the solution redirects me here: http://jsfiddle.net/9hGym/
On JS fiddle, the code works but when I implement it on my editor and run it, it's not working. By the way, as a library I used Google CDN, I don't know if it is proper way, so help me. Here's my code by the way..
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script language = "javascript">
// Write on keyup event of keyword input element
$("#search").keyup(function(){
_this = this;
// Show only matching TR, hide rest of them
$.each($("#table tbody").find("tr"), function() {
console.log($(this).text());
if($(this).text().toLowerCase().indexOf($(_this).val().toLowerCase()) == -1)
$(this).hide();
else
$(this).show();
});
});
</script>
</head>
<body>
<div class="row large-centered">
<h1>World of Warcraft characters. <small>Mine and my brothers, we share.</small></h1>
</div>
<div class="row large-centered">
<input type="text" id="search" placeholder="Type to search..." />
<table id="table" width="100%">
<thead>
<tr>
<th>Character name</th>
<th>Class</th>
<th>Realm</th>
</tr>
</thead>
<tbody>
<tr>
<td>Benjamin.</td>
<td>Rogue.</td>
<td>Uldum ES.</td>
</tr>
<tr>
<td>Cachoito.</td>
<td>Hunter.</td>
<td>Agamaggan EN.</td>
</tr>
<tr>
<td>Contemplario.</td>
<td>Paladin.</td>
<td>Uldum ES.</td>
</tr>
<tr>
<td>Elthron.</td>
<td>Death Knight.</td>
<td>Agamaggan ES.</td>
</tr>
<tr>
<td>Giloh.</td>
<td>Priest.</td>
<td>Agamaggan EN.</td>
</tr>
<tr>
<td>Kitialamok.</td>
<td>Warrior.</td>
<td>Agamaggan EN.</td>
</tr>
<tr>
<td>Magustroll.</td>
<td>Mage.</td>
<td>Agamaggan EN.</td>
</tr>
<tr>
<td>Marselus.</td>
<td>Mage.</td>
<td>Uldum ES.</td>
</tr>
<tr>
<td>Mistrala.</td>
<td>Warrior.</td>
<td>Uldum ES.</td>
</tr>
<tr>
<td>Suavemente.</td>
<td>Warrior.</td>
<td>Agamaggan EN.</td>
</tr>
<tr>
<td>Tittus.</td>
<td>Monk.</td>
<td>Agamaggan EN.</td>
</tr>
<tr>
<td>Yarlokk.</td>
<td>Warlock.</td>
<td>Uldum ES.</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

You should place the javascript code within a $(document).ready, this will ensure the function is run after the DOM is ready.
<script language = "javascript">
$( document ).ready(function(){
// Write on keyup event of keyword input element
$("#search").keyup(function(){
_this = this;
// Show only matching TR, hide rest of them
$.each($("#table tbody").find("tr"), function() {
console.log($(this).text());
if($(this).text().toLowerCase().indexOf($(_this).val().toLowerCase()) == -1)
$(this).hide();
else
$(this).show();
});
});
});
</script>

You can try to use getElementsByTagName, and catch all "TD" elements, like this:
<html>
<body>
<script>
function _Change()
{
var TD = document.getElementsByTagName('td');
i=0;
do {
if ( TD[i].innerHTML.trim().localeCompare("three") == 0 ) TD[i].innerHTML = "3";
i++;
} while(i<TD.length)
}
</script>
<table border=1>
<tr><td> one </td> <td> two </td></tr>
<tr><td> three </td> <td> four </td></tr>
<tr><td> five </td> <td> six </td></tr>
</table>
<button onclick="_Change()"> change </button>
</body>
</html>

Javascript <tbody> swapping not working

I've got a couple tables whose content should change based on clicking certain buttons (in this case, links). I've used this Javascript code elsewhere successfully, though with only one parameter in the switchid() function (there was only one table to mess around with). I keep researching examples of this and I seem to be passing the variables correctly, so what am I doing wrong? This code doesn't work on Chrome or IE:
Edit: Per the comments, I was able to whittle my javascript section down to a single, smaller function, that should do the same thing. I have made the change below. It still doesn't work, though.
I also changed my "array" and "x" variables to "JonArray" and "JonX" to avoid any chances of one of those being a reserved word.
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
var topTable = new Array('English','Spanish');
var bottomTable = new Array('Japanese','Italian');
function switchid(JonArray,JonX) {
for(var i=0;i<JonArray.length();i++) {
document.getElementById(JonX).style.display='none';
}
document.getElementById(JonX).style.display='table-row-group';
}
</script>
<table border='1'>
<thead>
<tr><td>Odds</td><td>Evens</td></tr>
</thead>
<tfoot>
<tr><td>English</td><td>Spanish</td></tr>
</tfoot>
<tbody id='English'>
<tr><td>One</td><td>Two</td></tr>
<tr><td>Three</td><td>Four</td></tr>
</tbody>
<tbody id='Spanish' style="display:none;">
<tr><td>Uno</td><td>Dos</td></tr>
<tr><td>Tres</td><td>Quatro</td></tr>
</tbody>
</table>
<br />
<table border='1'>
<thead>
<tr><td>Odds</td><td>Evens</td></tr>
</thead>
<tfoot>
<tr><td>Japanese</td><td>Italian</td></tr>
</tfoot>
<tbody id='Japanese'>
<tr><td>Ichi</td><td>Ni</td></tr>
<tr><td>San</td><td>Shi</td></tr>
</tbody>
<tbody id='Italian' style="display:none;">
<tr><td>Un</td><td>Due</td></tr>
<tr><td>Tre</td><td>Quattro</td></tr>
</tbody>
</table>
</body>
</html>

http://jsfiddle.net/92ZPM/1/
I made sure the function and variables were available regardless of when they are created.
I also gave your variables descriptive names, cleaned up and stored the table data in a single object.
JavaScript
window.switchid = function (table, language) {
var tables = {
'top': ['English', 'Spanish'],
'bottom': ['Japanese', 'Italian']
};
for (var i = 0; i < tables[table].length; i++) {
document.getElementById(tables[table][i]).style.display = 'none';
}
document.getElementById(language).style.display =
'table-row-group';
}
HTML
<table border='1'>
<thead>
<tr>
<td>Odds</td>
<td>Evens</td>
</tr>
</thead>
<tfoot>
<tr>
<td>English
</td>
<td>Spanish
</td>
</tr>
</tfoot>
<tbody id='English'>
<tr>
<td>One</td>
<td>Two</td>
</tr>
<tr>
<td>Three</td>
<td>Four</td>
</tr>
</tbody>
<tbody id='Spanish' style="display:none;">
<tr>
<td>Uno</td>
<td>Dos</td>
</tr>
<tr>
<td>Tres</td>
<td>Quatro</td>
</tr>
</tbody>
</table>
<br />
<table border='1'>
<thead>
<tr>
<td>Odds</td>
<td>Evens</td>
</tr>
</thead>
<tfoot>
<tr>
<td>Japanese
</td>
<td>Italian
</td>
</tr>
</tfoot>
<tbody id='Japanese'>
<tr>
<td>Ichi</td>
<td>Ni</td>
</tr>
<tr>
<td>San</td>
<td>Shi</td>
</tr>
</tbody>
<tbody id='Italian' style="display:none;">
<tr>
<td>Un</td>
<td>Due</td>
</tr>
<tr>
<td>Tre</td>
<td>Quattro</td>
</tr>
</tbody>
</table>

you have to change your javascript a little:
var tables=new Array();
tables['topTable'] = new Array('English','Spanish');
tables['bottomTable'] = new Array('Japanese','Italian');
function switchid(JonArray,JonX) {
//alert(JonArray);
var tmptable=tables[JonArray];
for(var i=0;i < tmptable.length;i++) {
document.getElementById(tmptable[i]).style.display='none';
}
document.getElementById(JonX).style.display='';
}

Some of these answers work, but I just caught the REAL answer via Chrome DevTools! In my 'for' loop I was using 'length()' instead of 'length'!!!

Why not to use CSS instead of looping through IDs?
JSFiddle
HTML
<table border='1' class="English">
<thead>
<tr><td>Odds</td><td>Evens</td></tr>
</thead>
<tfoot>
<tr><td onclick="changeLang(this,'English')">English</td><td onclick="changeLang(this,'Spanish')">Spanish</td></tr>
</tfoot>
<tbody id='English'>
<tr><td>One</td><td>Two</td></tr>
<tr><td>Three</td><td>Four</td></tr>
</tbody>
<tbody id='Spanish'>
<tr><td>Uno</td><td>Dos</td></tr>
<tr><td>Tres</td><td>Quatro</td></tr>
</tbody>
</table>
CSS
tbody {
display: none;
}
.English #English, .Spanish #Spanish, .Japanese #Japanese, .Italian #Italian {
display: table-row-group;
}
JS
function changeLang(cell, lang) {
cell.parentNode.parentNode.parentNode.className = lang;
}

How can I get all <tr>-s from a <tbody> and convert it to String?

I have a 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="getTbodyString();" value="get it"/>
I want some jquery/javascript, which can get the inside of the tbody by String. Like:
function getTbodyString() {
var tbodyString = $(.......).text(); //or val()?
alert("the body - "+tbodyString);
}
The result in the alert window should be this:
the body - <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>
Could anyone help me?

You need to html() instead of text(). The function text will not return you tags but returns plain text within tags.
var tbodyString = $('#tbodyID').html();
I would use native javascript function here that would be faster then jquery.
var tbodyString = document.getElementById('tbodyID').innerHTML; 

Just Replace your function code as below :
function getTbodyString() {
var tbodyString = $('#tbodyID').html();
alert("the body - "+tbodyString);
}

Categories