Develop Reference

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>

Get cell index of table onClick with JQuery

$('.details').click(function(){
$(this).index()+1).toggleClass('.details, .overlay-wrapper');
});
Each table cell has some details/content in (hidden). Whenever a user selects the cell I need to pass through the index so only the details/div within the cell is shown.
Every single cell in the table has a div/details within the cell. So I need to only toggle on and off the div within the correct cell. At the moment it toggles every single details div on the page.
Thank you
JsFiddle is below with the html.
http://jsfiddle.net/t6yczwuo/

You have several problems with the code shown:
Unmatched bracket
Incorrect parameters for toggleClass (no . and no comma)
Without HTML this is all guesswork, but you seldom need the index to work with related cells. The following mockup use closest() to find the TD parent, then find() to find another related cell in the same TD:
$('.details').click(function(){
$(this).toggleClass("details overlay-wrapper").closest('td').find('.someother').toggle();
});
JSFiddle: http://jsfiddle.net/TrueBlueAussie/gj2zz8po/
This example simply toggle the classes you specified on the details div, and hides/shows a related div within the same TD.
If you use this JSFiddle as the start of your example we can customise the code to match your situation.
Update for your new HTML:
$('.details-more').click(function (e) {
e.preventDefault();
$(this).closest('td').find('.overlay-wrapper .details').toggle();
});
http://jsfiddle.net/TrueBlueAussie/gj2zz8po/2/
Note: The e.preventDefault() should be used, even on bookmark links, to stop the page move to the top when clicked on a longer page.

You need .next() and not index().
.toggleClass() accepts just a single class name without a .. Also, toggling the class on which you are using any kind of selector is not recommended.
$('.details-more').click(function(e){
e.preventDefault();
$(this).next('.overlay-wrapper').find('div').toggleClass('details');
//Instead of find('div') you could use a specific class selector -
//find('.targetHidden') provided this class remains static throughout the html.
});
Updated Fiddle

HTML
<table style="width:100%">
<tr>
<td>Header</td>
<td>Header</td>
<td>Header</td>
</tr>
<tr>
<td>
Details
<div class="overlay-wrapper details">
<div class="">THIS IS THE SOME DETAILS OR CONTENT</div></div>
</td>
<td>
<div class="details"></div>
</td>
<td>
Details
<div class="overlay-wrapper details">
<div class="">THIS IS SOME MORE CONTENT</div></div>
</td>
</tr>
<tr>
<td>
<div class="details"></div>
</td>
<td>
Details
<div class="overlay-wrapper details">
<div class="">SOME TEST RANDOM STUFF</div></div>
</td>
<td>
<div class="details"></div>
</td>
</tr>
<tr>
<td>
<div class="details"></div>
</td>
<td>
<div class="details"></div>
</td>
<td>
Details
<div class="overlay-wrapper details">
<div class="">SOME MORE CONTENT</div></div>
</td>
</tr>
<tr>
<td>
<div class="details"></div>
</td>
<td>
<div class="details"></div>
</td>
<td>
<div class="details"></div>
</td>
</tr>
</table>
CSS
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 15px;
}
.details {display:none;}
Javascript
$('.details-more').click(function(){
$(this).next('.overlay-wrapper').toggleClass('details');
});

Set class to active in table row

I'm a bit limited in being able to get what I want and I am hoping maybe there is a way to do this, either with CSS (which I doubt) or javascript.
I have a table as seen below where drupal will assign the link an "active" class. This is great, but I would like to change the CSS of the entire row that the active link is in and I just can't automate that with drupal. Is there anyway to see which page the user is on and then add a class or id to the row (tr) that has the current link?
<table class="views-table cols-0" thmr="thmr_80">
<tbody>
<tr class="odd views-row-first">
<td class="views-field views-field-counter">
Link 1
</td>
</tr>
<tr class="even">
<td class="views-field views-field-counter">
Link 2
</td>
</tr>
</tbody>
</table>

To add a class to the row based on the active anchor, you could use closest() (if using jQuery), and just style the class you decide to give that row with CSS.
$(function() {
$('.views-table a.active').closest('tr').addClass('active_row');
});
CSS
.active_row {color: green; height: 300px;}

<script src="/jquery-1.2.6.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('td.views-field a.active').css("color","900");
});
</script>
<table class="views-table cols-0" thmr="thmr_80">
<tbody>
<tr class="odd views-row-first">
<td class="views-field views-field-counter">
Link 1
</td>
</tr>
<tr class="even">
<td class="views-field views-field-counter">
Link 2
</td>
</tr>
</tbody>
</table>
hope this helps

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>');