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;
}
Related
I have something like this:
<table id="thatTable" class="table toggle-circle">
<thead>
<tr>
<th>ID</th>
<th>FieldA</th>
<th data-hide="all">FieldB</th>
<th data-hide="all">FieldC</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<td colspan="4">
<div class="text-right">
<ul class="pagination"></ul>
</div>
</td>
</tr>
</tfoot>
</table>
Then a JS like this:
var fillThatTable = function (list) {
$.each(list, function (index, item) {
$('#thatTable tbody').append($('<tr>')
.append($('<td>').text(item.ID))
.append($('<td>').text(item.FieldA))
.append($('<td>').text(item.FieldB))
.append($('<td>').text(item.FieldC))
)
);
});
};
Everything works fine, the table gets the data and shows it all. Problem comes when I want to set footable() to that table, like so:
$(document).ready(function () {
fillThatTable();
$('#thatTable').footable();
});
And instead of getting something beautiful, I just receive an average filtered table, almost like I didn't put that $('#thatTable').footable(). I checked the JS are imported, they are. Is it maybe because the table doesn't have anything in the tbody? What am I missing?
Dream:
Reality:
I've updated PM's fiddle to make an easier use of FooTable: http://jsfiddle.net/0pb4x7h6/1
If your html changes to this:
<table id="thatTable" class="table toggle-circle">
<thead>
<tr>
<th data-name="ID">ID</th>
<th data-name="FieldA">FieldA</th>
<th data-name="FieldB" data-breakpoints="all">FieldB</th>
<th data-name="FieldC" data-breakpoints="all">FieldC</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<td colspan="4">
<div class="text-right">
<ul class="pagination"></ul>
</div>
</td>
</tr>
</tfoot>
</table>
Then you can simplify your script to this:
$(document).ready(function () {
var list = [
{"ID":"1","FieldA":"A1","FieldB":"B1","FieldC":"C1"},
{"ID":"2","FieldA":"A2","FieldB":"B2","FieldC":"C2"},
{"ID":"3","FieldA":"A3","FieldB":"B3","FieldC":"C3"}
];
// No need for this
//fillThatTable();
$('#thatTable').footable({
rows: list
});
});
I know how to do this with jquery, by doing this:
$("#rateTable tr:even").css("background", "#e7edea");
However, the format I am using will not allow jquery. I tried the code below, but it is saying that the style is null. Does anyone see what I am doing wrong?
document.getElementById("rateTable tr:even").style.background = "#e7edea";
<table id="rateTable">
<tr>
<td>Blue</td>
<td>Green</td>
</tr>
<tr>
<td>Red</td>
<td>Purple</td>
</tr>
<tr>
<td>Teal</td>
<td>Yellow</td>
</tr>
</table>
You don't really need JavaScript for this. It could been done in plain CSS with the nth-child pseudo-class.
tr:nth-child(even) {
background: #E7EDEA;
}
<table id="rateTable">
<tr>
<td>Blue</td>
<td>Green</td>
</tr>
<tr>
<td>Red</td>
<td>Purple</td>
</tr>
<tr>
<td>Teal</td>
<td>Yellow</td>
</tr>
</table>
You can do it with #rateTable tr:nth-of-type(even) as your selector. document.selectElementById() only works when you give it the exact string being used as an id, not a CSS selector. I would do it with CSS because it will update automatically and is likely faster, but you can do it in JS if you want:
const evenRows = document.querySelectorAll("#rateTable tr:nth-of-type(even)")
for (const row of evenRows) row.style.background = "#e7edea"
<table id="rateTable">
<tr>
<td>Blue</td>
<td>Green</td>
</tr>
<tr>
<td>Red</td>
<td>Purple</td>
</tr>
<tr>
<td>Teal</td>
<td>Yellow</td>
</tr>
<tr>
<td>Orange</td>
<td>Pink</td>
</tr>
</table>
Try to use querySelectorAll and next iterate over received collection to change background. See below:
var trToChange = document.querySelectorAll("#rateTable tr:nth-child(even)");
for(var i = 0; i < trToChange.length; i++){
trToChange[i].style.background = "#e7edea";
}
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!
I have a json file with some data and I am using a Js loop to load a jQuery template to iterate through and load a table made of 4 rows based on the data, so far I only get the last row. https://github.com/codepb/jquery-template
<script type="text/html" id="tableContent">
<tr>
<th>Key</th>
<th>Product</th>
<th>Bookings</th>
<th>%</th>
<th>Transactions</th>
</tr>
<tr>
<td data-content="">sth</td>
<td data-content="Product"></td>
<td data-content="Bookings"></td>
<td data-content="Percentage"></td>
<td data-content="Transactions"></td>
</tr>
</script>
function builTable(){
var table = "",
colors = ['col1', 'col2', 'col3', 'col4', 'col5', 'col6'];
for(i = 0; i< source.Products.length; i++){
$("table").loadTemplate($("#tableContent"),
{
Product: source.Products[i].Product,
Bookings: source.Products[i].Bookings,
Percentage: source.Products[i].Percentage,
Transaction: source.Products[i].Transaction
} );
$(document).ready(function(){
builTable();
});
<table border="1" cellpadding="2">
</table>
Is there something wrong inside the loop?
http://jsfiddle.net/9JV7t/1/
I think you just need to add an array because it loads the whole content just once and then overrides it again. But therefore you need to only include the data rows in the template and add the headings to the table (DEMO):
<script type="text/html" id="tableContent">
<tr>
<td data-content="">sth</td>
<td data-content="Product"></td>
<td data-content="Bookings"></td>
<td data-content="Percentage"></td>
<td data-content="Transactions"></td>
</tr>
</script>
Your table:
<table>
<thead>
<tr>
<th>Key</th>
<th>Product</th>
<th>Bookings</th>
<th>%</th>
<th>Transactions</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
And the js:
function builTable(){
$("tbody").loadTemplate($("#tableContent"), source.Products);
}
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);
}