Develop Reference

Refresh <table> HTML without refresh entire page Javascript Only

I would like to know how can i refresh my without refresh the entire page in Javascript
Exemple of HTML
<table class="list" cellpadding="1" cellspacing="1">
<thead>
<tr>
<td class="checkbox edit"></td>
<td class="Element sortable" onclick="My.Game.List.sort(223, 'eleemnt');">Element</td>
<td class="ew sortable" onclick="My.Game.List.sort(223, 'ew');">Pop.</td>
<td class="distance sortable" onclick="My.Game.RaidList.sort(223, 'distance');">Distance</td>
<td class="element sortable" onclick="My.Game.List.sort(223, 'element');">Option</td>
<td class="last sortable" onclick="My.Game.List.sort(223, 'last');">Last</td>
<td class="action"></td>
</tr>
</thead>
<tbody>
<tr class="slotRow" id="slot-row-3021">
<td class="checkbox">
<input id="slot3021" name="slot[3021]" type="checkbox" class="markSlot check" onclick="My.Game.List.markSlot(223, 3021, this.checked);">
</td>
<td class="element">
Artic
</td>
<td class="ew">
31 </td>
<td class="distance">
2.2 </td>
<td class="Option">
<div class="icon"><img class="unit u11" alt="My ALt" src="img/x.gif"><span class="MyClass">2</span></div> </td>
<td class="last">
<img src="img/x.gif" class="My Class"> // Might Change
<img src="img/x.gif" class="carry full" alt="My Alt // Might Change
18.09.18, 15:26 // Change
<div class="clear"></div>
</td>
<td class="action">
<a class="arrow" href="#" onclick="My.Game.List.editSlot(223, 3021, true, 'rallyPoint'); return false;">Éditer</a>
</td>
</tr>
</tbody>
</table>
Basicly i would like to refresh the content of all the row of my Table
I tried this but it seems not working i don't understand why :
JAVASCRIPT CODE :
setInterval(function() {
document.getElementsByTagName('table')[0].reload();
}, 500);
NB : The function is just a timer to refresh the table each 500 ms.
What is excepted to change :
<tr class="slotRow" id="slot-row-3021">
<td class="checkbox">
<input id="slot3021" name="slot[3021]" type="checkbox" class="markSlot check" onclick="My.Game.List.markSlot(223, 3021, this.checked);">
</td>
<td class="element">
Artic
</td>
<td class="ew">
31 </td>
<td class="distance">
2.2 </td>
<td class="Option">
<div class="icon"><img class="unit u11" alt="My ALt" src="img/x.gif"><span class="MyClass">2</span></div> </td>
<td class="last">
<img src="img/x.gif" class="My Class"> // Might Change
<img src="img/x.gif" class="carry full" alt="My Alt // Might Change
18.09.18, 15:26 // Change
<div class="clear"></div>
</td>
<td class="action">
<a class="arrow" href="#" onclick="My.Game.List.editSlot(223, 3021, true, 'rallyPoint'); return false;">Éditer</a>
</td>
</tr>
Best regards !

There are a lot of answers to your question.
You could simply fix this by replacing the (inner)HTML of the element any time an update takes place.
Something like HTML : draw table using innerHTML
Messy, but it is the answer to your question.
Your HTML is not dynamicly updating values, that would be done trough javascript. If you are getting your values from a webservice - look into AJAX.

Jquery firing function once per element

So, I have a small table with some content, which with the click of a button can be expanded to show a container div with extra content.
I'm trying to tie a function to this action, but when I do, the function seems to get fired once per number of table row.
JSFiddle:
https://jsfiddle.net/jtby9c12/
Table:
<button id="toggle-descriptions-button">+</button>
<table>
<tbody>
<tr>
<th class="table-header-1">Download</th>
<th class="table-header-2">Size</th>
<th class="table-header-3">Notes</th>
</tr>
<tr>
<td class="column-1">Item
<div class="div-container" style="display: block;">
<div class="div-gallery">
<img src="#">
<br style="clear: both">
</div>
<div class="div-description">Description Text</div>
</div>
</td>
<td class="column-2">1.2MB</td>
<td class="column-3">Note</td>
</tr>
</tbody>
</table>
*The actual table contains 22 rows and descriptions, this just shows the structure sample.
Jquery:
var descriptions = $(".div-container")
var descButton = $("#toggle-descriptions-button")
descButton.click(function(){
console.log("Button Clicked!")
descriptions.toggle(400, function() {
console.log("I'm a fucntion!")
});
});
As you can see, it calls the function 22 times, and I'm trying to get it to call just once.
I'm looking to get a single call back for the function, it's one state change for all descriptions, I only need one return.

To achieve this you can use the promise() returned from the toggle() calls. Attach a done() event handler to it, which will fire after all the promises have been resolved:
var $descriptions = $(".div-container")
var $descButton = $("#toggle-descriptions-button")
$descButton.click(function() {
console.log("Button Clicked!")
$descriptions.toggle(400).promise().done(function() {
console.log("I'm a function!")
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="toggle-descriptions-button">+</button>
<table>
<tbody>
<tr>
<th class="table-header-1">Download</th>
<th class="table-header-2">Size</th>
<th class="table-header-3">Notes</th>
</tr>
<tr>
<td class="column-1">Item
<div class="div-container" style="display: none;">
<div class="div-gallery">
<img src="#">
<br style="clear: both">
</div>
<div class="div-description">Description Text</div>
</div>
</td>
<td class="column-2">1.2MB</td>
<td class="column-3">Note</td>
</tr>
<tr>
<td class="column-1">Item
<div class="div-container" style="display: none;">
<div class="div-gallery">
<img src="#">
<br style="clear: both">
</div>
<div class="div-description">Description Text</div>
</div>
</td>
<td class="column-2">1.2MB</td>
<td class="column-3">Note</td>
</tr>
<tr>
<td class="column-1">Item
<div class="div-container" style="display: none;">
<div class="div-gallery">
<img src="#">
<br style="clear: both">
</div>
<div class="div-description">Description Text</div>
</div>
</td>
<td class="column-2">1.2MB</td>
<td class="column-3">Note</td>
</tr>
</tbody>
</table>

I want to show the div in place of the other div

I want to show the div2 in replace of the div1 which style.display="none".
When i'll click the retaurants td it will replace the div1 with div 2
then show the div 2 in place of div1.
html:
<table id="Table_01" width="800" height="400" border="0" cellpadding="0" cellspacing="0">
<tr class="hoverkarna" id="links" bordercolor="#000000" bgcolor="#FFFF00">
<td class="product_image" id="id1" bordercolor="#666666" style="border:solid">
<h1><span style="background-color:#999999"> Stay </span></h1>
</td>
<td class="Product_image" id="id2" bordercolor="#666666" style="border:solid" onClick="dd(id)">
<h1>Restaurants </h1>
</td>
<td class="Product_image" id="id3" bordercolor="#666666" style="border:solid" onClick="dd(id)">
<h1> Things to do </h1>
</td>
<!--shopping btn column -->
<td colspan="2" class="Product_image" id="id4" bordercolor="#666666" style="border:solid" onClick="dd(id)">
<h1> Shopping </h1>
</td>
</tr>
<tr>
<div id="div1">
<td width="550" height="200" colspan="4" bgcolor="e0e722">
<text style="font-size:20px; font-family:Monotype Corsiva;"> Where
You Wanna Go? </text>
<form class="demo">
<div class="dropdownstay"
</div>
</form>
</td>
</div>
</tr>
<tr>
<div id="div2" style="display:none;>
<td width="550" height="200" colspan="4" bgcolor="e0e722">
<text style="font-size:20px; font-family:Monotype Corsiva;"> What
You Wanna eat? </text>
<form class="demo">
<div class="dropdownstay"
</div>
</form>
</td>
</div>
</tr>
</table>
</div>
javascript:
<script type="text/javascript">
function dd(id) {
if(id=='id2')
{
var ele = document.getElementById("div2");
if(ele.style.display == "none")
{
ele.style.display = "block";
}
}
}
</script>
my code is showing the div2 but above the div1. I want to show my div2 in place of div1.
thanks in advance.

I think you should try something like this:
First remove your div2
JavaScript:
var ele = document.getElementById("div1");
if(ele.style.display == "none") {
ele.style.innerHTML= '
<td width="550" height="200" colspan="4" bgcolor="e0e722">
<text style="font-size:20px; font-family:Monotype Corsiva;">
What You Wanna eat?
</text>
<form class="demo">
<div class="dropdownstay">
</div>
</form>
</td>';
}
Here you have the idea, but you can optimize this, because, in your HTML you have similar code so you can reuse it by factoring it. I think you should only replace the content. (Your real problem is that you are using a div into a tag to wrap a tag, so you can keep your first idea with inline style modification and remove useless ).
Working example:
function dd(id) {
if(id=='id2'){
var ele = document.getElementById("div1");
ele.innerHTML=
'<td width="550" height="200" colspan="4" bgcolor="e0e722">'+
'<text style="font-size:20px; font-family:Monotype Corsiva;"> '+
'What You Wanna eat?'+
'</text>'+
'<form class="demo">'+
'<div class="dropdownstay">'+
'</div>'+
'</form>'+
'</td>';
}
}
<table id="Table_01" width="800" height="400" border="0" cellpadding="0" cellspacing="0">
<tr class="hoverkarna" id="links" bordercolor="#000000" bgcolor="#FFFF00">
<td class="product_image" id="id1" bordercolor="#666666" style="border:solid">
<h1><span style="background-color:#999999"> Stay </span></h1>
</td>
<td class="Product_image" id="id2" bordercolor="#666666" style="border:solid" onClick="dd(id)">
<h1>Restaurants </h1>
</td>
<td class="Product_image" id="id3" bordercolor="#666666" style="border:solid" onClick="dd(id)">
<h1> Things to do </h1>
</td>
<!--shopping btn column -->
<td colspan="2" class="Product_image" id="id4" bordercolor="#666666" style="border:solid" onClick="dd(id)">
<h1> Shopping </h1>
</td>
</tr>
<tr id="div1">
<td width="550" height="200" colspan="4" bgcolor="e0e722">
<text style="font-size:20px; font-family:Monotype Corsiva;"> Where
You Wanna Go? </text>
<form class="demo">
<div class="dropdownstay"
</div>
</form>
</td>
</tr>
</table>
</div>
EDIT
Here is a solution using inline style:
function dd(id) {
if(id=='id2'){
var tr1 = document.getElementById("tr1");
var tr2 = document.getElementById("tr2");
if(tr2.style.display == "none"){
tr2.style.display = "block";
tr1.style.display = "none";
}
}
}
<table id="Table_01" width="800" height="400" border="0" cellpadding="0" cellspacing="0">
<tr class="hoverkarna" id="links" bordercolor="#000000" bgcolor="#FFFF00">
<td class="product_image" id="id1" bordercolor="#666666" style="border:solid">
<h1><span style="background-color:#999999"> Stay </span></h1>
</td>
<td class="Product_image" id="id2" bordercolor="#666666" style="border:solid" onClick="dd(id)">
<h1>Restaurants </h1>
</td>
<td class="Product_image" id="id3" bordercolor="#666666" style="border:solid" onClick="dd(id)">
<h1> Things to do </h1>
</td>
<!--shopping btn column -->
<td colspan="2" class="Product_image" id="id4" bordercolor="#666666" style="border:solid" onClick="dd(id)">
<h1> Shopping </h1>
</td>
</tr>
<tr id="tr1">
<td width="550" height="200" colspan="4" bgcolor="e0e722">
<text style="font-size:20px; font-family:Monotype Corsiva;"> Where
You Wanna Go? </text>
<form class="demo">
<div class="dropdownstay">
</div>
</form>
</td>
</tr>
<tr id="tr2" style="display:none">
<td width="550" height="200" colspan="4" bgcolor="e0e722">
<text style="font-size:20px; font-family:Monotype Corsiva;"> What
You Wanna eat? </text>
<form class="demo">
<div class="dropdownstay">
</div>
</form>
</td>
</tr>
</table>

Two column checkboxes layout using just css

The following code is a dynamically generated part of a form and I only can style it using css.
No html changes but for the names of the classes with the exception of: classes "element" and "formField" as they are used as common classes for other elements in the form.
The layout I am looking for is a two column label-checkbox. As you can see in the code, I have 4 label-checkbox items. I need item 0 and 1 in a column and in another column next to it, item 2 and 3.
I know the tables should be gone for good, I agree but please help me here, I am going to build the whole site again but I don't have the time just yet.
<div class="element" id="mycat">
<table width="100%" border="0" style="">
<tbody><tr>
<td width="30%" align="right"><div style="float:right"><label id="lbl_eCat0">Category 0</label></div></td>
<td width="70%" align="left">
<div id="div_eCat0" style="float:left">
<input type="checkbox" name="eCat0" value="1" class="formField">
</div>
</td>
</tr>
</tbody></table>
</div>
<div class="element" id="mycat">
<table width="100%" border="0" style="">
<tbody><tr>
<td width="30%" align="right"><div style="float:right"><label id="lbl_eCat1">Category 1</label></div></td>
<td width="70%" align="left">
<div id="div_eCat1" style="float:left">
<input type="checkbox" name="eCat1" value="1" class="formField">
</div>
</td>
</tr>
</tbody></table>
</div>
<div class="element" id="mycat">
<table width="100%" border="0" style="">
<tbody><tr>
<td width="30%" align="right"><div style="float:right"><label id="lbl_eCat2">Category 2</label></div></td>
<td width="70%" align="left">
<div id="div_eCat2" style="float:left">
<input type="checkbox" name="eCat2" value="1" class="formField">
</div>
</td>
</tr>
</tbody></table>
</div>
<div class="element" id="mycat">
<table width="100%" border="0" style="">
<tbody><tr>
<td width="30%" align="right"><div style="float:right"><label id="lbl_eCat3">Category 3</label></div></td>
<td width="70%" align="left">
<div id="div_eCat3" style="float:left">
<input type="checkbox" name="eCat3" value="1" class="formField">
</div>
</td>
</tr>
</tbody></table>
</div>

You can use the CSS float and clear in order to do that. Here is an example.
.element{
float:right;
}
.element:nth-child(odd){
clear:right;
}
<div class="element" id="mycat">
<table width="100%" border="0" style="">
<tbody>
<tr>
<td width="30%" align="right">
<div style="float:right"><label id="lbl_eCat0">Category 0</label></div>
</td>
<td width="70%" align="left">
<div id="div_eCat0" style="float:left">
<input type="checkbox" name="eCat0" value="1" class="formField">
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="element" id="mycat">
<table width="100%" border="0" style="">
<tbody>
<tr>
<td width="30%" align="right">
<div style="float:right"><label id="lbl_eCat1">Category 1</label></div>
</td>
<td width="70%" align="left">
<div id="div_eCat1" style="float:left">
<input type="checkbox" name="eCat1" value="1" class="formField">
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="element" id="mycat">
<table width="100%" border="0" style="">
<tbody>
<tr>
<td width="30%" align="right">
<div style="float:right"><label id="lbl_eCat2">Category 2</label></div>
</td>
<td width="70%" align="left">
<div id="div_eCat2" style="float:left">
<input type="checkbox" name="eCat2" value="1" class="formField">
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="element" id="mycat">
<table width="100%" border="0" style="">
<tbody>
<tr>
<td width="30%" align="right">
<div style="float:right"><label id="lbl_eCat3">Category 3</label></div>
</td>
<td width="70%" align="left">
<div id="div_eCat3" style="float:left">
<input type="checkbox" name="eCat3" value="1" class="formField">
</div>
</td>
</tr>
</tbody>
</table>
</div>

If you can style the parent element of those four divs, you can set
.parent {
columns: 2;
}
This will work in IE10+. https://jsfiddle.net/c979dxLe/1/
You can also set the width of the columns. Docs: https://developer.mozilla.org/nl/docs/Web/CSS/columns

I did this for some md-checkboxes in my parent div, and they are column-first ordered! Like this:
1 4
2 5
3
CSS:
.parent {
columns: 2;
}
.parent > * {
width: 100%;
}

Table align in JavaScript

This is a two part question, I have searched under multiple tags to find an answer to no avail.
I have a table containing 4 columns and 4 nuggets, I am trying to get them to auto align on the page load so that the four columns take the whole width of the page across the bottom. I would like it to look the same whether the user is on a 22" wide screen or a 15" screen:
Would this best be done by JavaScript or is there a more efficient
way of doing this?
How would you achieve this?
Edit: sorry I should have been more specific, this is my code:
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:#c1bdb6;">
<tbody>
<tr>
<td align="right" valign="top" id="col-1">
<div id="nugget1" align="right" style="height: 459px;">
<div id="nugget1-content" align="left">
<h2 class="menutitle"> FAQ's </h2>
</div>
</div>
</td>
<td valign="top" id="col-2">
<div id="nugget2" align="center" style="height: 459px;">
<h2 class="menutitle"> Contacts </h2>
</div>
</td>
<td valign="top" id="col-3">
<div id="nugget3" align="center" style="height: 459px;">
<h2 class="menutitle"> Calendar </h2>
<ul class="vertmenu">
<li>
Shared Calendars
</li>
</div>
</td>
<td valign="top" id="col-4">
<div id="nugget4" align="center" style="height: 459px;">
<h2 class="menutitle"> Mail </h2>
</div>
</td>
</tr>
</tbody>
</table>

Unless there's a particular reason why you're using such outdated HTML (tables for layout, use of things like valign and align in the HTML, etc), the most efficient (with regards to page load) way of achieving what you want is by restructuring your HTML to something more along the lines of:
<div id="nuggets">
<div id="nugget1">
<h2 class="menutitle"> FAQ's </h2>
</div>
<div id="nugget2" class="col">
<h2 class="menutitle"> Contacts </h2>
</div>
<div id="nugget3">
<h2 class="menutitle"> Calendar </h2>
<ul class="vertmenu">
<li>
Shared Calendars
</li>
</div>
<div id="nugget4">
<h2 class="menutitle"> Mail </h2>
</div>
</div>
You can then have CSS along the lines of:
#nuggets {
height: 459px;
}
#nuggets > div {
width: 25%;
height: 459px;
float: left;
text-align: center;
}

Assuming a nugget is a table cell, this is probably what you're looking for:
This sounds like a job for CSS.
Relevant CSS:
table {
width: 100%;
}

You can try setting the table width to correspond to screen resolution, perhaps using this ?
<table width="100%" height="100%">
<tr>
<td align="center" valign="middle">
Body html here
</td>
</tr>
</table>

If you are using the actual HTML <table> tag for your table, then the easiest way to do it is with the <colgroup> tag.
In your case, the code would be:
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:#c1bdb6;">
<colgroup width="25%" />
<tbody>
<tr>
<td align="right" valign="top" id="col-1">
<div id="nugget1" align="right" style="height: 459px;">
<div id="nugget1-content" align="left">
<h2 class="menutitle"> FAQ's </h2>
</div>
</div>
</td>
<td valign="top" id="col-2">
<div id="nugget2" align="center" style="height: 459px;">
<h2 class="menutitle"> Contacts </h2>
</div>
</td>
<td valign="top" id="col-3">
<div id="nugget3" align="center" style="height: 459px;">
<h2 class="menutitle"> Calendar </h2>
<ul class="vertmenu">
<li>
Shared Calendars
</li>
</div>
</td>
<td valign="top" id="col-4">
<div id="nugget4" align="center" style="height: 459px;">
<h2 class="menutitle"> Mail </h2>
</div>
</td>
</tr>
</tbody>
Any attributes in the <colgroup> will apply to all of the columns in that group. If you have specific styling that you'd like to do to any of the individual columns, you can add <col> tags within the <colgroup> for each column, to define them. You can also nest <colgroup> tags inside each other.