Develop Reference

Getting element of a table with ID

Been having a great experience here so far!
Anyway, in coding my console bot, i encountered a problem. I wish to obtain some text data from a table, this table records a history of input into the site. But his table has no id and only has a class.
so here is the site element codes:
<div id="game">
<div class="gameTop">
<div class="right">
<div class="scroll">
<table>
<tbody>
<tr>
<td>aaa</td>
<td>bbb</td>
<td>ccc</td>
<td>ddd</td>
</tr>
I wish to get var xxx = "...." which corresponds to ddd. I have tried getElementbyClassName('scroll') but it gives me the table. Which is expected.
I am stuck at how to I delve deeper into the codings.

If you're using jQuery, you can use the :get() selector to specifically target the 4th <td> element and text() to retrieve the content.
var dd = $('table td:eq(3)').text();
Here's a fiddle with an example.
Edit
In case you need to get it through #game, you can quickly modify the selector to:
var dd = $('#game table td:eq(3)').text();

You should be able to get the table rows as follows:
var rows = document.getElementsByTagName("table")[0].rows;
var cell = rows[0].cells[4];
var value = cell.innerHTML

In this case, I prefer XPath. See code below:
function getElementByXpath(path) {
return document.evaluate(path, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
}
var theDddNode = getElementByXpath("//td[contains(text(),'ddd')]");

Use javascript to Transfer Text

I have got 3 tables in html that at a certain time, i want to move text from 1 table will move to another. Can someone show me a javascript function ( just a few lines long - don't spend too long) that can transfer text from one td to another.

Transferring ONE td value to another:
Well if you assign a td an ID (ex. "firstTD", "secondTD"), you could store it's value in a variable (ex. "tdToMove"):
var tdToMove = document.getElementById("firstTD").innerHTML;
document.getElementById("secondTD").innerHTML = tdToMove;
Note: This will only copy the innerHTML of a single td, and duplicate it on the other. If you wish to clear the first entry, run:
document.getElementById("firstTD").innerHTML = "";
to render the first td 'blank'.
You will have to experiment to find a way to move ALL values to the other table, this was just a pointer.
Also, If the text is moving from table to table, and the tables remain identical, why not just place the input in both to begin with, OR, simply run a code to duplicate the table when you would like to move the data?

You can use Node.textContent property to get and set the text of a Node.
Here is a link about it:https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent
I have made a fiddle to show you that in action: https://jsfiddle.net/3dep0msg/
In this fiddle i transfer the text of cell1 to cell2 and add it to the text of cell2.
I use textContent and not innerHTML property, because you wanted to transfer ONLY text!
function copyTextFromCell(id1,id2){
var cell1= document.getElementById(id1);
var cell2= document.getElementById(id2);
cell2.textContent = cell2.textContent+cell1.textContent;
}
copyTextFromCell("cell1","cell2");

if you want to do this using jquery.
<table id="table1">
<tr>
<td>1,1</td>
<td>1,2</td>
</tr>
<tr>
<td>2,1</td>
<td>2,2</td>
</tr>
</table>
<table id="table2">
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
$('#table1 tr').each(function (indexR, element) {
$(this).find('td').each(function (index, element) {
var table2Rows = $('#table2 tr');
var table2Row = table2Rows.eq(indexR);
var table2Column = table2Row.find('td');
var table2cell = table2Column.eq(index);
table2cell.html( $(this).html());
});
});
working fiddle.

Setting TD value from previous TD

I have a table that is filled in with values dependant on a previous page
those avlues are filled in with struts apparently
but I'm not very good with all that stuff so is there a simple was I can do something like this, either with HTML only or maybe a small javascript I can put in tha page?
<Table>
<TR>
<TH>ID</TH>
<TD><s:property value="groupID" /><TD> <--Number generated by the page with struts
</TR>
<TR>
<TH>ID Value</TH>
<TD>foobar</TD> <-- the text I want to add in dependant on the number from the previous TD
</TH>
</Table>
so, is there a simple way to go about doing this? HTML, CSS, JavaScript solution maybe?

Given that exact HTML, a simple script like this will do it. But if you don't know JavaScript, you should really learn it so that you understand what you're doing.
<body>
<Table>
<TR>
<TH>ID</TH>
<TD><s:property value="groupID" /><TD>
</TR>
<TR>
<TH>ID Value</TH>
<TD>foobar</TD>
</TR>
</Table>
<!-- The script is here so it won't run until the TABLE has loaded -->
<script type="text/javascript">
// This is a map of the struts values to your values
var valueMap = {
"1": "foo",
"2": "bar",
"3": "baz"
};
// Browser compatibility. Older IE uses 'innerText' instead of 'textContent'
var textContent = ('textContent' in document) ? 'textContent' : 'innerText';
// Get all the TD elements on the page
var tds = document.getElementsByTagName('td');
// Get the text content of the first TD (index 0)
var text = tds[0][textContent];
// Get the value from the map using the text we fetched above
var value = valueMap[text];
// Set the text content of the second TD (index 1) to the mapped value
tds[1][textContent] = value;
</script>
</body>

Assuming you want to place the value 'groupID' (set in the first tr's td) into the second row's td element, then the following jQuery will do the trick:
$(document).ready(function() {
// Scrape the XML out of the TD containing the xml
var tdXml = $('table tr').eq(0).find('td').html();
// Grab the value of the value attribute (groupID)
var value = $(tdXml).attr('value');
// Set this value in the second row's TD
$('table tr').eq(1).find('td').text(value);
}​);​
jsFiddle here

Grab table by ID and iterate over rows one at a time

I would like to use
var merch = document.getElementById('merch');
to retrieve a table on my webpage, which is dynamically populated. Then I would like to iterate over the table, one row at a time, grabbing the
<td>
elements and storing each of them as a string in an array. Each row will have its own array.
Can someone give me a clue as to how to accomplish this? I feel certain there is a simple method I just haven't found in my searches.
Thank you in advance for your consideration.

The working demo.
var merch = document.getElementById('merch');
// this will give you a HTMLCollection
var rows = merch.rows;
// this will change the HTMLCollection to an Array
var rows = [].slice.call(merch.rows);
// if you want the elements in the array be string.
// map the array, get the innerHTML propery.
var rows = [].slice.call(merch.rows).map(function(el) {
return el.innerHTML;
});
map

You will want to use jQuery for this, it'll make it much easier. Then you can do something like this.
HTML Table
<table id="iterateOverThisTable">
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
</table>
JS File (with jQuery already included)
$(function() {
var rows = [];
$("#tableToIterateOver tr").each(function() {
var = cells = [];
$(this).find('td').each(function() {
cells.push($(this).text());
});
rows.push(cells);
});
})

take values from table cells and turn into array

using jquery I need to retrieve an array from table cells, format the data and pass it into a js function.
the code i am using is this:
var l1 = new Array();
$('table#datatable tbody td:first-child').each(function() {
l1.push($(this).text());
});
this is the table fragment
<tr>
<th scope="row">Age: 0-4</th>
<td>0</td>
<td>9.7</td>
</tr>
<tr>
<th scope="row">5-17</th>
<td>23.6</td>
<td>18.0</td>
</tr>
<tr>
<th scope="row">Total 0-17</th>
<td>20.6</td>
<td>16.1</td>
</tr>
the table's id is "datatable". i want to return an array of the contents of each first td and then format it like this:
0,23.6,20.6
i am very new to using arrays...

You can do this:
var l1 = $('#datatable td:nth-child(2)').map(function() {
return $(this).text();
}).get();
//l1 = [0, 23.6, 20.6]
See here for a demo
This uses .map() to get an array from the elements. Your main problem is that :first-child needs to be the first child of the parent, it doesn't mean the "first child of this type", so only a <th> would be :first-child in your code. Instead you need the 2nd child, or :nth-child(2) to get the first <td> element.

td:first-child won't match anything because none of the <td> elements are the first children (they are preceded by <th>). Instead, use td:nth-child(2).

This should work:
var values = [];
$('#datatable tbody tr').each(function () {
values.push($('td:first', this).text());
});
console.log(values);
Explanation:
Line 1: create the values variable and set it to an empty array.
Line 2: loop over every tr in #datatable.
Line 3: add the text of the first td in the tr to the values array.
values is now populated with the values.