Develop Reference

javascript navigating child elements in this context saved to var

suppose I have the following html
<div class="mytable">
<table>
<tbody>
<tr>
</tr>
</tbody>
<table>
</div>
<div class="mytable">
<table>
<tbody>
<tr>
</tr>
</tbody>
<table>
</div>
which I address with the following code:
$('.mytable').each(function(){
var that = $(this);
});
Now I need to get tr elements inside my tables. How can I do that? I tried something like:
$(that+'>tr')
but it obviously did not work(( Any help would be appreciated. Thank you.

In reference to #NenadVracar comment you can try using:
$('.mytable').each(function(){
var that = $(this);
var $tr = that.find('tr');
});

$('div > tr') would work if tr was a direct child of div, which is obviously not the case...
In your question, you talk about context. This word is actually appropriate in jQuery because it is a formal concept of the library.
.find() is a valid solution, of course. However, you could simplify even more using the optional context parameter of the jQuery function. If you do not see what I mean, look at this code:
$('tr', '.mytable').each(function () {
var $tr = $(this);
console.log($tr.attr('id'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mytable">
<table>
<tbody>
<tr id="tr1"></tr>
</tbody>
</table>
</div>
<div class="mytable">
<table>
<tbody>
<tr id="tr2"></tr>
</tbody>
</table>
</div>
$('tr', '.mytable') means that you want to select tr elements within .mytable elements. If you only need tr elements from your tables, this is a decent alternative to .find().

Save whole table html code in a variable

I have a table where the cell content is editable.
Now I want, after I finished editing the table, the html code from the table with all values.
Here is a table:
<table class="table table-bordered content">
<thead>
<tr>
<th>bla</th>
<th>bla bla</th>
<th>bla bla bla </th>
<th>more bla</th>
</tr>
</thead>
<tbody>
<tr contenteditable="true">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr contenteditable="true">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<button id="save">Save</button>
That's my JS code:
$('#save').on('click', function () {
var table = $('.content').html();
alert(table);
});
The problem is that if I console.log the table variable I get this output:
<thead>
<tr>
<th>bla</th>
<th>bla bla</th>
<th>bla bla bla </th>
<th>more bla</th>
</tr>
</thead>
<tbody>
<tr contenteditable="true">
<td>dwad</td>
<td>dwada</td>
<td>dawdaw</td>
<td>dawdaw</td>
</tr>
<tr contenteditable="true">
<td>daw<br></td>
<td>daw<br></td>
<td>dwadaw<br></td>
<td>daw<br></td>
</tr>
</tbody>
If you have a closer look you can see that the
<table class=" ... "> and the </table> tag are gone but I also need them.
Does someone know what I can do to also get the table-tags ?

Try this:
var table = $('.content')[0].outerHTML;
alert(table);
Should work in every browser

Use outerHTML on the node element. Like this:
$('#save').on('click', function () {
var table = $('.content')[0].outerHTML;
alert(table);
});

Use outerHTML
$('.content').get(0).outerHTML
Check the example on JSfidle

$('#save').on('click', function () {
var table = $('.content')[0].html();
alert(table);
});
This should work.

Use Element.outerHTML
The outerHTML attribute of the element DOM interface gets the serialized HTML fragment describing the element including its descendants. It can be set to replace the element with nodes parsed from the given string.
$('#save').on('click', function () {
var table = $('.content');
alert(table.get(0).outerHTML);
});

2D loops for building a table

I want to loop through a two-dimensional structure in angularjs to display it in a table. The data looks as follows:
data = {
"keyA": ["valueA", "valueB"],
"keyB": ["valueC", "valueD"]
}
the output should look like this:
<table>
<tr>
<th>keyA</th>
<td>valueA</td>
</tr>
<tr>
<th>keyA</th>
<td>valueB</td>
</tr>
<tr>
<th>keyB</th>
<td>valueC</td>
</tr>
<tr>
<th>keyB</th>
<td>valueD</td>
</tr>
</table>
at the moment my angular enriched html doesn't work and looks as follows:
<table>
<div ng:repeat="(key, values) in data">
<div ng:repeat="value in values">
<tr>
<td>{{key}}</td>
<td>{{value}}</td>
</tr>
</div>
</div>
</table>
In this case I'm using the <div> element, but it doesn't work because obviously a <div> doesn't belong into a <table> like that. Is there some find of a No-Op-Element, which I have to use for loops like this?

I'm not sure if that's possible. Maybe someone can be a little more creative then I. You could try something like this though:
Controller-
var data = {
"keyA": ["valueA", "valueB"],
"keyB": ["valueC", "valueD"]
};
$scope.getPairs = function() {
var ret = [];
for(var key in data) {
for(var i = 0; i < data[key].length; i++) {
ret.push(key, data[key][i]);
}
}
return ret;
}
HTML -
<table>
<tr ng-repeat="pair in getPairs() track by $index">
<td>{{pair[0]}}</td>
<td>{{pair[1]}}</td>
</tr>
</table>

You could add ngRepeat on <tr> and <tbody> element:
<table>
<tbody ng-repeat="(key, values) in data">
<tr ng-repeat="value in values">
<th>{{key}}</th>
<td>{{value}}</td>
</tr>
</tbody>
</table>
Plunker

Selecting td element in a tr

Here is the code I want to process using javascript / jquery
EDITED THE BELOW CODE BLOCK FOLLOWING THE COMMENTS
<table>
<tbody>
<tr class="promote">
<td>1</td>
<td><span class="team_logo visible-lg visible-sm" style=""></span><a class="team_name " href="/team/show/7473/Power-Hiters">Power Hiters</a><span class="online" title="user is online"></span></td>
<td style="text-align:center">5</td>
<td style="text-align:center">10</td>
<td style="text-align:center">5</td>
<td style="text-align:center">0</td>
<td style="text-align:center">0</td>
<td style="text-align:center">6.713</td>
</tr>
<tr> <!-- Similar Above tr Content --> </tr>
<tr> <!-- Similar Above tr Content --> </tr>
<tr> <!-- Similar Above tr Content --> </tr>
</tbody>
</table>
I want to get the inner content/html of each <td> tag in a array using javascript / jquery
Extra Info:
When I tried it seems jquery strips the td and tr tags.
Actual thing I want to do is extract td in a multi dimensional array for each tr
the table structure:
<table>
<tbody>
<tr> <!-- Above tr Content --> </tr>
<tr> <!-- Above tr Content --> </tr>
<tr> <!-- Above tr Content --> </tr>
</tbody>
</table>

Since you want a multidimensional array, you will need to:
Make an array that will hold all table data
Iterate through all tr and create an array per row
Push that array in the first one, that holds all table data.
something like this:
var tableContent = [];
$('table tr').each(function(){
var trcontent = [];
$('td', this).each(function(){ trcontent.push($(this).text()); });
tableContent.push(trcontent);
})
console.log(tableContent);
example in jsfiddle

Try,
var arr = $("#cache").find('td').map(function(){ return this.textContent; }).get();

jquery to find href under TD class

new_Url:
<td class="posts column-posts">2</td>
old_url:
<span class="view">View</span>
I want to replace the old url by new_url..
var new_url = $("td.column-posts").find("a").attr('href');
$("span.view").find("a").attr('href',new_url)
I can't get the value of new_url.
PLease help. Thanks
Here's the complete structure for New_url:
<tbody id="the-list" data-wp-lists="list:tag">
<tr id="tag-7" class="alternate">
<td class="posts column-posts">1</td>
</tr>
</tbody>

You can do like this, just make the ids for links:
$('#2').attr('href', $('#1').attr('href'));
Here is fiddle. http://jsfiddle.net/Goodluck/PasNk/1/

Enclose tbody inside table tag
<table>
<tbody id="the-list" data-wp-lists="list:tag">
<tr id="tag-7" class="alternate">
<td class="posts column-posts">1
</td>
</tr>
</tbody>
</table>
Working Fiddle

If there is only one td with class column-posts
var new_url = $("td.column-posts a").attr('href');
$("span.view a").attr('href',new_url)
If there is multiple .column-posts td then you have to write in each like
$("td.column-posts a").each(function(){
$("span.view a").attr('href',new_url) //you have to map each span to each a
})