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.

How can I create expand/collapse function for each row of table? Angular6

So I need to be able to expand some details on each row of a table. Right now I'm having two issues:
Clicking the expand/collapse toggle will trigger the action for every row in the table.
The first row always puts the details above it.
Here's the code segment:
<tbody>
<tr *ngFor="let client of clients">
<td class="details-control">
<a class="btn btn-link" (click)="collapsed1=!collapsed1">
<i class="material-icons">
expand_more
</i>
</a>
</td>
<td>{{client.firstName}}</td>
<td>{{client.lastName}}</td>
<td>{{client.company}}</td>
<td><input type="checkbox"></td>
</tr>
<div *ngIf="!collapsed1">
<p>Details</p>
</div>
</tbody>
And what it looks like:
Toggling
Also I had my *ngFor statement in the tag earlier but I realized I can't hit individual client objects if I build a separate for details.
Let me know how I can improve!

It's a very common pattern.
The best and quick solution is to use some ID instead of just a boolean in your collapsed1 variable.
<tbody>
<tr *ngFor="let client of clients">
<td class="details-control">
<a class="btn btn-link" (click)="collapsed1 = collapsed1 ? 0 : client.id ">
<i class="material-icons">
expand_more
</i>
</a>
</td>
<td>{{client.firstName}}</td>
<td>{{client.lastName}}</td>
<td>{{client.company}}</td>
<td><input type="checkbox"></td>
<div *ngIf="collapsed1=client.id">
<p>Details</p>
</div>

You need a boolean array collapsed[] and use index in your ngFor, so you can use collapsed[i]. Take a look here for using index in ngFor:
ngFor using Index
Let me know if you need more info. Wellcome

Nevermind, here is the code that solved it.
<tbody>
<tr *ngFor="let client of clients; let i = index">
<td class="details-control">
<a class="btn btn-link" (click)="client.hideme=!client.hideme">
<i class="material-icons" *ngIf="!client.hideme">
expand_more
</i>
<i class="material-icons" *ngIf="client.hideme">
expand_less
</i>
</a>
</td>
<td width="30%">{{client.firstName}}
<tr *ngIf="client.hideme">
<td>Hey, I'm a bunch of details!</td>
</tr>
</td>
<td>{{client.lastName}}</td>
<td>{{client.company}}
<tr *ngIf="client.hideme">
<td>More Issuer details</td>
</tr>
</td>
<td><input type="checkbox"></td>
</tr>
</tbody>

Appending table row through jQuery loop

I have a piece of HTML table which is returned by the server and it looks like following:
<tbody>
<tr role="row" class="odd even pointer">
<td class="" width="5%" tabindex="0">
<ul class="enlarge">
<li>
<img src="" width="60px" height="60px">
<span>
<img src="">
</span>
</li>
</ul>
</td>
<td class="sorting_1" width="75%" data-url="" data-title="Sai Baba Nag Champa Incense 250 Gram, New, Free Shipping" data-price="11.25" data-image="" data-itemid="251908749939"> </td>
<td class="sorting_1" style="text-align:left;" width="10%">
£ 11
</td>
</tr>
</tbody>
What I'm currently doing is injecting the entire HTML in my DOM right away... But instead of doing it like this:
var dbtb = $('#datatable-responsive', data).html();
console.log(dbtb);
$('#datatable-responsive').html(dbtb
I would like to first fetch all the TR's from the table, and then append them directly into the table itself in DOM, but through a for/foreach loop?
How could I achieve this?

Not sure what you are trying to achieve. My best guess is you are trying to copy those rows to another table. If that's the case it should be as simple as:
$('table tr').appendTo('#target');
assuming that <table id="target"> is the target one

How do I make an entire Table a button/link to another HTML page?

I have this table, that should be a button that link to another page. The reason is that the values of the table should be changeable with data from a database. The parameter can be changes to pH for example and the Value to 7 or something. But the table/button shall link to the same page. Where it is possible to set the Target.
So far this i what i got:
<table class="Button" >
<tr>
<td class="parameter"> Temperature</td>
</tr>
<tr>
<td class="Value">23&#x2103</td>
</tr>
<tr>
<td class="Target">Target: 30&#x2103 </td>
</tr>
</table>
So how do i make it a link/button?

You can use onclick and redirect your page.
Or wrap your table with <a>
<table class="Button" onclick="location.href='yourpage.html'" >
<tr>
<td class="parameter"> Temperature</td>
</tr>
<tr>
<td class="Value">23&#x2103</td>
</tr>
<tr>
<td class="Target">Target: 30&#x2103 </td>
</tr>
</table>

The same way as anything else.
You put an <a> element (with an href attribute) around it.

Wrap it into a link element:
<a href="LINK.html">
<table>
<tr>
<td class="parameter"> Temperature</td>
</tr>
<tr>
<td class="Value">23&#x2103</td>
</tr>
<tr>
<td class="Target">Target: 30&#x2103 </td>
</tr>
</table>
</a>
And if you wanna have a button, add a button element to that:
<button style="color:black; background-color:white; border-radius:5px;">
<a href="LINK.html">
<table>
<tr>
<td class="parameter"> Temperature</td>
</tr>
<tr>
<td class="Value">23&#x2103</td>
</tr>
<tr>
<td class="Target">Target: 30&#x2103 </td>
</tr>
</table>
</a>
</button>

You can do it using javascript onClick event or put <a> tag around it
Html
<table class="button" onClick="linkTo('https://www.google.com')">
.
.
.
</table>
Java Script
<script>
function linkTo(var link){
window.location = link;
}
</script>
Css for mouse point
<style>
table.button{
cursor: pointer;
}
</style>

Wrap a SPAN tag around text that exists already in a table, using jQuery

I would like to wrap a span tag around text (shown below) which exists already in my table.
Text to wrap in span tag:
Build Muscle and Train Harder<br> Boost Energy without the
Calories<br> Promote Nitric Oxide Production
My HTML:
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td>Build Muscle and Train Harder<br> Boost Energy without the Calories<br> Promote Nitric Oxide Production<br><br>
<table cellspacing="0" cellpadding="0" border="0" id="tttt">
<tbody>
<tr>
<td><b><font class="pricecolor colors_productprice"><span class="PageText_L483n"><h3><b style="font-size:13px"><span class="saleprice"><font class="text colors_text"><b><span class="PageText_L335n">Sale Price</span>: </b></font></span> <b class="prodPrOr">$34.05 </b></b></h3></span></font></b><br><a class="pricecolor colors_productprice" href="/ShoppingCart.asp?ProductCode=amino%2Dchewables"><b><span class="PageText_L655n"><img class="AddRight" src="/v/vspfiles/assets/images/addtocartsmall.gif"></span></b></a>
</td>
</tr>
</tbody>
</table>
<br><br>
<a onclick="window.open('/help_FreeShipping.asp', 'FreeShipping', 'scrollbars,status,resizable,width=300,height=300');" href="javascript:void(0);">
<img border="0" alt="" src="/v/vspfiles/templates/2007New/images/Icon_FreeShipping.gif" class="vCSS_img_icon_free_shipping"></a>
</td>
<td valign="top" align="right" id="v65-productdetail-action-wrapper" class="v65-productdetail-options">
<div id="contact">
<img src="/v/vspfiles/assets/images/osw0001_talk_button.jpg">
</div>
</td>
</tr>
<tr>
<td colspan="2">
<ul></ul>
</td>
</tr>
</tbody>
</table>

You should add a class or id to the td you're trying to select to make it a lot simpler. E.g. if you made it:
<td class="myText">Build ... </td>
Now that you can easily select it (though if you can't add the class for some reason there are ways around that - it's just the simplest way to do it), imho.
$('.myText').html().replace($('.myText').html().match(/^.*/), '<span class="myClass">'+$('.myText').html().match(/^.*/)+'</span>');