Develop Reference

Reverse table rows top row go on bottom without change the position of th, HOW?

I use the HTML code.
I have a table and I write in first tr td "A" and "B" in second tr td
I have these two rows
but I want to print "B" in first tr and "A" in second
!! But I don't want to change my th position!!
Is it possible with any script like js or Jquery or with any type js CDN....??
<table id='table1'>
<tr>
<th>name</th>
</tr>
<tr>
<td>A</td>
</tr>
<tr>
<td>B</td>
</tr>
</table>

Give this a try:
Your script
$(function(){
$("tbody").each(function(elem,index){
var arr = $.makeArray($("tr",this).detach());
arr.reverse();
$(this).append(arr);
});
});
The second way to do the same will be like this:
var tbody = $('table tbody');
tbody.html($('tr',tbody).get().reverse());
I hope this helps! Thanks!

You can swap the .textContent of the <td> children of the <tr> elements
const {rows:[{cells:[a]}, {cells:[b]}]} = table1;
[a.textContent, b.textContent] = [b.textContent, a.textContent];
<table id='table1'>
<tr>
<td>A</td>
</tr>
<tr>
<td>B</td>
</tr>
</table>

Since you can use reverse() with an array, you can use get() to convert this to an array first. If you have a dynamic number of rows you can use something like this:
$('tbody').each(function(){
var row = $(this).children('tr');
console.log(row)
$(this).html(row.get().reverse())
})

Use this below code:
$(function(){
$("tbody").each(function(elem,index){
var arr = $.makeArray($("tr",this).detach());
arr.reverse();
$(this).append(arr);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id='table1'>
<tbody>
<tr>
<td>A</td>
</tr>
<tr>
<td>B</td>
</tr>
<tr>
<td>C</td>
</tr>
</tbody>
</table>

You can loop through each row, starting at the bottom and add it to the bottom - this will reverse the rows.
This will mean you don't need to load all the rows into an array, but will mean additional DOM manipulation.
var tbl = $("#table1>tbody")
var l = tbl.find("tr").length;
for (var i=l; i>=0; --i)
{
tbl.find("tr").eq(i).appendTo(tbl);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id='table1'><tbody>
<tr> <td>A</td> </tr>
<tr> <td>B</td> </tr>
<tr> <td>C</td> </tr>
<tr> <td>D</td> </tr>
<tr> <td>E</td> </tr>
</tbody></table>

Problem Solved
<script type="text/javascript">
var trCount = $('#table1 tr').length;
var $rows = [];
for (var i = 0; i < trCount; i++)
$rows.push($('#table1 tr:last-child').remove());
$("#table1 tbody").append($rows);
</script>
Thanks to all

You can do that with pure vanilla JS, you don't need jquery or any other library for that.
function reverseOrder(table) {
const rows = table.querySelector('tbody').children;
const swaptemp = rows[0].children[0].innerHTML;
rows[0].children[0].innerHTML = rows[1].children[0].innerHTML;
rows[1].children[0].innerHTML = swaptemp;
}
const tableToReserveOrder = document.getElementById('table1');
reverseOrder(tableToReserveOrder);
<table id='table1'>
<tr>
<td>A</td>
</tr>
<tr>
<td>B</td>
</tr>
</table>
This is just a demonstration for your use case, you can play around with value of n which is 0 for this case where n+1 is 1.

JavaScript get td from table [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I have a table with tbodies. I want to create a array with the values in the first td of with tbody. How can I do that?
My html:
<table id="myTable">
<thead>
<tr>
<th>Test1</th>
</tr>
</thead>
<tbody>
<tr>
<td>Val1</td>
<td></td>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td>Val2</td>
<td></td>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td>Val3</td>
<td></td>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td>Val4</td>
<td></td>
<td></td>
</tr>
</tbody>
My array should have the values: Val1, Val2, Val3, Val4

There is a function called getElementsByTagName(tagName) which returns an array of elements.
Something like this should work:
var array = []; //your array
var rows = document.getElementById("myTable").getElementsByTagName("tr");
for(var i = 0; i < rows.length; i++) {
array[i] = rows[i].getElementsByTagName("td")[0].innerHTML;
}

Try this:
var bodies = document.getElementById("myTable").tBodies;
var items = [];
for (var i = 0; i < bodies.length; i++)
items.push(bodies[i].getElementsByTagName("td")[0].innerText);
alert(items);
<table id="myTable">
<thead>
<tr>
<th>Test1</th>
</tr>
</thead>
<tbody>
<tr>
<td>Val1</td>
<td></td>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td>Val2</td>
<td></td>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td>Val3</td>
<td></td>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td>Val4</td>
<td></td>
<td></td>
</tr>
</tbody>

Try to use $(selector).map() at this context,
var x = $("#myTable > tbody > tr > td:first-child").map(function(){
return this.textContent;
}).get().join();
console.log(x); //Val1, Val2, Val3, Val4
DEMO
A pure javascript version by using Array.prototype.map() along with querySelectorAll(),
var x = [].map.bind(
document.querySelectorAll("#myTable > tbody > tr > td:first-child"),function(elem){
return elem.textContent;
})();
console.log(x); //Val1, Val2, Val3, Val4
DEMO

you can do this with jQuery:
var myArray=[];
$('#myTable tbody tr td:nth-child(1)').each(function(){
myArray.push($(this).text());
});

Just use the native javascript [Element].getElementsByTagName([TagName])[index] method.
// Get the array of <tbody> elements in the document.
tbodies = document.getElementsByTagName("tbody");
values = [];
// Loop through the array of <tbody> elements.
for(var index = 0; index < tbodies.length; index++) {
// Add the value of the <td> element to the array of values.
values += tbodies[index].firstChild.firstChild.nodeValue;
}
The line values += tbodies[index].firstChild.firstChild.nodeValue gets each <tbody> element and finds it's firstChild (the <tr> element) and finds the <tr> element's firstChild (the <td> element) and then finds the text that it contains (.nodeValue).
The values array ends up with resulting value of ["Val1","Val2","Val3","Val4"].

Loop HTML table and add the identical items and its calculated amount to another table

<html>
<body>
<div>
<table border="1" id="topTable">
<thead>
<th>Item</th>
<th>Sold</th>
</thead>
<tbody id="topTableBody">
<tr>
<td>Apples</td>
<td>50</td>
</tr>
<tr>
<td>Apples</td>
<td>25</td>
</tr>
<tr>
<td>Oranges</td>
<td>30</td>
</tr>
<tr>
<td>Strawberry</td>
<td>60</td>
</tr>
<tr>
<td>Cherry</td>
<td>10</td>
</tr>
<tr>
<td>Guava</td>
<td>5</td>
</tr>
<tr>
<td>Strawberry</td>
<td>20</td>
</tr>
</tbody>
</table>
</div>
<button id="btn">Click</button>
</br>
<div>
<table border="1" id="bottomTable">
<thead>
<th>Item</th>
<th>Sold</th>
</thead>
<tbody id="bottomTableBody">
</tbody>
</table>
</div>
</body>
</html>
When I press on the button I want it to loop through the top table and get the item names that're alike and add them in one row with the sold amount combined in the bottom table ex: apples will have their own row with a sold amount of 75 and others who have no names that're alike will have their own row such as Oranges with the sold amount also.

If you can use JQuery.
(JSFiddle: http://jsfiddle.net/inanda/o9axgkaz/):
jQuery('#btn').on('click', function() {
var sumMap = {};
//Iterate through table rows
$("table tbody tr").each(function () {
if (sumMap[$(this).children('td:nth-child(1)').text()]) {
sumMap[$(this).children('td:nth-child(1)').text()] = sumMap[$(this).children('td:nth-child(1)').text()] +Number($(this).children('td:nth-child(2)').text());
} else {
sumMap[$(this).children('td:nth-child(1)').text()] = Number($(this).children('td:nth-child(2)').text());
}
})
//Append result to the other table
$.each(sumMap, function (i, val) {
$('#bottomTable tr:last').after('<tr><td>'+i+'</td><td>'+val+'</td>');
});
});
Pure javascript:
(JSFiddle: http://jsfiddle.net/inanda/2dmwudfj/ ):
appendResultToBottomTable= function() {
var sumMap = calculate();
appendResultToTable('bottomTableBody', sumMap);
}
function calculate() {
var table = document.getElementById("topTableBody");
var map = {};
for (var i = 0, row; row = table.rows[i]; i++) {
var itemType=(row.cells[0].innerText || row.cells[0].textContent);
var value=(row.cells[1].innerText || row.cells[1].textContent);
if (map[itemType]) {
map[itemType] = map[itemType] +Number(value);
} else {
map[itemType] = Number(value);
}
}
return map;
}
function appendResultToTable(tableId, sumMap){
var table = document.getElementById(tableId);
for (var item in sumMap){
var row = table.insertRow(table.rows.length);
var cellItem = row.insertCell(0);
var cellValue = row.insertCell(1);
cellItem.appendChild(document.createTextNode(item));
cellValue.appendChild(document.createTextNode(sumMap[item]));
}
}

If it is applicable for your project to use external libraries, you can do it with code like below:
alasql('SELECT Item,SUM(CONVERT(INT,Sold)) AS Sold \
INTO HTML("#res",{headers:true}) \
FROM HTML("#topTable",{headers:true}) \
GROUP BY Item');
Here:
SELECT Item, SUM(Sold) FROM data GROUP BY Item is a regular SQL expression to group and sum data from the table
CONVERT(INT,Sold) conversion procedure from string to INT type
FROM HTML() and INTO HTML() special functions to read/write data from/to HTML table, {headers:true} is a parameter to use headers
I added some minor CSS code (for table and cells borders), because Alasql generates the "plain" HTML table.
See the working snippet below.
(Disclaimer: I am an author of Alasql library)
function run() {
alasql('SELECT Item,SUM(CONVERT(INT,Sold)) AS Sold INTO HTML("#res",{headers:true}) FROM HTML("#topTable",{headers:true}) GROUP BY Item');
}
#res table {
border:1px solid black;
}
#res table td, th{
border:1px solid black;
}
<script src="http://alasql.org/console/alasql.min.js"> </script>
<div>
<table border="1" id="topTable">
<thead>
<th>Item</th>
<th>Sold</th>
</thead>
<tbody id="topTableBody">
<tr>
<td>Apples</td>
<td>50</td>
</tr>
<tr>
<td>Apples</td>
<td>25</td>
</tr>
<tr>
<td>Oranges</td>
<td>30</td>
</tr>
<tr>
<td>Strawberry</td>
<td>60</td>
</tr>
<tr>
<td>Cherry</td>
<td>10</td>
</tr>
<tr>
<td>Guava</td>
<td>5</td>
</tr>
<tr>
<td>Strawberry</td>
<td>20</td>
</tr>
</tbody>
</table>
</div>
<button id="btn" onclick="run()">Click</button>
</br>
<div id="res"></div>

Sorting pairs of rows with tablesorter

http://jsfiddle.net/9sKwJ/66/
tr.spacer { height: 40px; }
$.tablesorter.addWidget({
id: 'spacer',
format: function(table) {
var c = table.config,
$t = $(table),
$r = $t.find('tbody').find('tr'),
i, l, last, col, rows, spacers = [];
if (c.sortList && c.sortList[0]) {
$t.find('tr.spacer').removeClass('spacer');
col = c.sortList[0][0]; // first sorted column
rows = table.config.cache.normalized;
last = rows[0][col]; // text from first row
l = rows.length;
for (i=0; i < l; i++) {
// if text from row doesn't match last row,
// save it to add a spacer
if (rows[i][col] !== last) {
spacers.push(i-1);
last = rows[i][col];
}
}
// add spacer class to the appropriate rows
for (i=0; i<spacers.length; i++){
$r.eq(spacers[i]).addClass('spacer');
}
}
}
});
$('table').tablesorter({
widgets : ['spacer']
});
<table id="test">
<thead>
<tr>
<th>Name</th>
<th>Number</th>
<th>Another Example</th>
</tr>
</thead>
<tbody>
<tr>
<td>Test4</td>
<td>4</td>
<td>Hello4</td>
</tr>
<tr>
<td colspan="3">Test4</td>
</tr>
<tr>
<td>Test3</td>
<td>3</td>
<td>Hello3</td>
</tr>
<tr>
<td colspan="3">Test3</td>
</tr>
<tr>
<td>Test2</td>
<td>2</td>
<td>Hello2</td>
</tr>
<tr>
<td colspan="3">Test2</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>Hello1</td>
</tr>
<tr>
<td colspan="3">Test1</td>
</tr>
</tbody>
</table>
This sorts just the way I want it if you sort it by the first column, but the other two columns don't maintain the same paired 'tr' sort im looking for.
Any help on this?

Use the expand-child class name on each duplicated row:
<tr>
<td>Test3</td>
<td>3</td>
<td>Hello3</td>
</tr>
<tr class="expand-child">
<td colspan="3">Test3</td>
</tr>
It's defined by the cssChildRow option:
$('table').tablesorter({
cssChildRow: "expand-child"
});​
Here is a demo of it in action.

HTML and JavaScript auto increment number

I am new to HTML and JavaScript. I got a problem like this in HTML (This code below only visualize the problem for you to easy to reference.)
<tr>
<td>1</td>
<td>Harry</td>
</tr>
<tr>
<td>2</td>
<td>Simon</td>
</tr>
<td>3</td>
<td>Maria</td>
</tr>
</tr>
<td>4</td>
<td>Victory</td>
</tr>
This is a name list, however the problem is that sometime i need to add more name into this table and I HAVE TO ADD in front of Number 1, so meaning i have to re-write the number list, (EX: 1 1 2 3 4 --> 1 2 3 4 5). I feel that is not a good way.
NOTE: I don't want to change the list number decrease from top to bottom. And this is a HTML file so can't apply PHP
Anyone can help me to make the number to a variable like "i" and a function can help me to fill variable i increment from top to bottom automatically like
<tr>
<td>i</td>
<td>Harry</td>
</tr>
<tr>
<td>i</td>
<td>Simon</td>
</tr>
<td>i</td>
<td>Maria</td>
</tr>
</tr>
<td>i</td>
<td>Victory</td>
</tr>
Function Fill_i for example:
I think that JavaScript should be used in this case. Thanks for your help and suggestion on this problem.
Again: I am not allowed to use PHP or ASP and when I add a new name, I add it manually by HTML.

You can use a css counter - MDN
table {
counter-reset: section;
}
.count:before {
counter-increment: section;
content: counter(section);
}
<table>
<tr>
<td class="count"></td>
<td>Harry</td>
</tr>
<tr>
<td class="count"></td>
<td>Simon</td>
</tr>
<tr>
<td class="count"></td>
<td>Maria</td>
</tr>
<tr>
<td class="count"></td>
<td>Victory</td>
</tr>
</table>
FIDDLE

This should work for you:
<table>
<tr>
<td>Harry</td>
</tr>
<tr>
<td>Simon</td>
</tr>
<tr>
<td>Maria</td>
</tr>
<tr>
<td>Victory</td>
</tr>
</table>
<script>
var tables = document.getElementsByTagName('table');
var table = tables[tables.length - 1];
var rows = table.rows;
for(var i = 0, td; i < rows.length; i++){
td = document.createElement('td');
td.appendChild(document.createTextNode(i + 1));
rows[i].insertBefore(td, rows[i].firstChild);
}
</script>
The script should be placed immediately after your table. It goes through each row of your table and adds an extra cell to the beginning with the incrementing number inside that cell.
JSFiddle Demo

Edit: seems like the other solution posted would work do (was added while I typed this up).
You really should be using PHP to do something dynamic like this, which would become trivial with a single for loop.
However, if you insist on using HTML/Javascript (or perhaps this is a 'static page'...) then what you are asking should be possible.
You could add a class to each of the <td> elements you want to use, so:
<tr>
<td class='personid'>i</td>
<td>Harry</td>
</tr>
<tr>
<td class='personid'>i</td>
<td>Simon</td>
</tr>
<td class='personid'>i</td>
<td>Maria</td>
</tr>
</tr>
<td class='personid'>i</td>
<td>Victory</td>
</tr>
Then you would have a javascript function that does something like this:
var list = document.getElementsByClassName("personid");
for (var i = 1; i <= list.length; i++) {
list[i].innerHTML = i;
}

Are you sure you don't want an ordered list?
<ol>
<li>Fred</li>
<li>Barry</li>
</ol>

<script>
function addRow(index, name){
var tbody = document.getElementById("nameList");
var row = document.createElement("tr");
var data1 = document.createElement("td");
data1.appendChild(document.createTextNode(index));
var data2 = document.createElement("td");
data2.appendChild(document.createTextNode(name));
row.appendChild(data1);
row.appendChild(data2);
tbody.appendChild(row);
}
var name=new Array();
name[0]="Harry";
name[1]="Simon";
name[2]="Maria";
name[3]="Victory";
for(var i=0; i < name.length; i++) {
addRow(i,name[i]);
}
</script>
<html>
<body>
<table id="nameList">
</table>
</body>
</html>

I would say do this (im going to assume you are not going to load in jquery or anything fancy):
<html>
<head>
<script type="text/javascript>
function writeTable(){
// list of names
var myList = [ "name1", "name2", "etc", "etc"];
// your variable to write your output
var outputTable = "<table>";
//the div to write the output to
var outputDiv = document.getElementById("output");
//the loop that writes the table
for (var i=0; i<myList.length; i++){
outputTable += "</tr><td>"+i+"</td><td>"+myList[i]+"</td></tr>";
}
//close the table
outputTable += "</table>";
//write the table
outputDiv.innerHTML = outputTable;
}
</script>
</head>
<body onload=writeTable()>
<div id='output'></div>
</body>
</html>
hope this helps :)

Try this
$(document).ready(function() {
var addSerialNumber = function () {
$('table tr').each(function(index) {
$(this).find('td:nth-child(1)').html(index);
});
};
addSerialNumber();
});