We Keep Coding

Insert data into an HTML table using javascript

I have the following HTML table with 5 rows and 5 columns (table.html). I need to insert letter 'A' on each cell. How do I achieve this using javascript?

Using only JavaScript (no jQuery):
JavaScript
var cells = document.getElementsByTagName("td");
for(var i = 0; i < cells.length; i++){
var cell = cells[i];
cell.innerText = "A " + cell.innerText;
}
JSFiddle
EDIT
If you want to target a specific table, you can do this by setting an id on it and using something like this:
var cells = document.getElementById("a-table").getElementsByTagName("td");
JSFiddle

If you are usin jQuery. It is very simple
$('td').each(function(){
$(this).html('A' + $(this).html());
});

Try this, using the selector that suits you, for example:
[].forEach.call(document.querySelectorAll("#table_id td"), function(el){
el.innerHTML = 'A';
});

Replacing text in table with an array using Jquery

I'm using Jquery V1.11.1 and I want to replace all of the TD elements in my HTML table from the third row from left. I'm using an array which values must be passed in each TD element of the table.
var numberArray = [0,1,2,3,4,5];
$.each(numberArray , function(index, value){
$("table tr td:nth-child(3)").html(value);
});
This returns in every TD element a 5. How can I make it like 1, 2, 3, 4, 5 per TD tag.

$("table tr td:nth-child(3)").each(function(index){
$(this).html(numberArray[index]);
});

Try this
var numberArray = [0,1,2,3,4,5];
$.each(numberArray , function(index, value){
$("table tr td:nth-child("+index+")").html(value);
});

Try this code if you want to update value of 3rd row with array
var numberArray = [0,1,2,3,4,5];
$.each(numberArray , function(index, value){
var td=value+1;
$("table tr:nth-child(3) td:nth-child("+td+")").html(value);
});
Updated DEMO

Try this:
var numberArray = [0,1,2,3,4,5];
$.each(numberArray , function(index, value){
$("table tr td:nth-child("+index+")").html(value);
});

How can I get td first child value?

I have a table where I want, for each row, get the first td and for this td I want the first input child value.
I'm able to get the markup for the input, but I can't extract the value.
Here is my code:
$('#table-unidades tr:not(:last-child)').each(function () {
$('td:first-child', this).each(function () {
var firstCell = $(this).children().eq(0);
var text = firstCell.html();
alert(text);
})
});
my alert outputs this:
<input type="text" name="unidades-first-td" value="UN - Unidade" disabled />
But all I want is the value.. I've tried with .text(), .val() , but it didn't work...

try this and get them all as an array once:
$("#table-unidades tr:not(:last-child)>td:first-child input:text:first-child")
.map(function () {return $(this).val(); }).get();

You need to use val() to get value of input, then use find() to find input field inside td
$('#table-unidades tr:not(:last-child)').each(function() {
$('td:first-child', this).each(function() {
var firstCell = $(this).children().eq(0);
var text = firstCell.find('input').val();
alert(text);
})
});

You don't need to use two each loops to find first child, also you must use .val() to get the value of an input, try this
$('#table-unidades tr:not(:last-child)').each(function () {
var text = $(this).find('td:first input:first').val();
});

Try
var val = firstCell.find('input').val();
alert(val);

Use .val() to get the value of the input element
$('#table-unidades tr:not(:last-child) td:first-child').each(function () {
var firstCell = $(this).children('input');
var text = firstCell.val();
alert(text);
});

var trs = $("tr", ".my-table");
for(var i=0; i<trs.length; i++){
var nval = $("td:first-child > input", trs[i]).val();
console.log(nval);
}
1 don't care about the reputation.
2 if it doesn't work, make it work.

Using variable from .closest() into a selector

I am sure this is something very easy to do, but I'm stuck.
I have multiple forms in a page each one with a "duplicate" button.
The button duplicates a row and put it at the end of a table that is inside of each form. The class of the tables is '.table-add'. So I'm trying to tell the button to find the closest form element and add it to the path on my selector, but it is not working. I know it can work if I put an ID in each form and call for them, but that's not what I want. Thanks for help.
This is my code:
i=0;
$(".duplicate").on("click", function(e) {
i++;
$newID = 'clon'+i;
selectedObj = $($( e.target ).closest("form"));
alert(selectedObj.html()); //**THIS WORKS**
$cloned = '<tr class="'+$newID+'">'+$(selectedObj+' .table-add tr:first').next().html()+'</tr>';
$(selectedObj+' .table-add > tbody:last').append($cloned);
});

Just use this:
var i=0;
$(".duplicate").on("click", function(e) {
i++;
var $newID = 'clon'+i;
var selectedObj = $(e.target).closest("form");
alert(selectedObj.html()); //**THIS WORKS**
var $cloned = '<tr class="'+$newID+'">'+selectedObj.find('.table-add tr:first').next().html()+'</tr>';
selectedObj.find('.table-add > tbody:last').append($cloned);
});
selectedObj is a jQuery object so you can use the .find() function to select .table-add tr:first and '.table-add > tbody:last'.

Getting third cell of each row

var Rows = $("#tableid tbody tr");
Rows.each(function(index, element) {
var thirdCell = $(this+":nth-child(3)").text();
alert(thirdCell);
});
Something in the var thirdCell line is not working correctly. Each row has four children, all td tags. I want to get the text inside the third cell.

Try something like below,
var Rows = $("#tableid tbody tr");
Rows.each(function(index, element) {
var thirdCell = $(this).find('td').eq(2).text();
alert(thirdCell);
});

this is not a string, it's a jquery object, so it can't be appended to when you are building your new selector. You could do it like this:
var selector = $(this).selector;
var thirdCell = $(selector+":nth-child(3)").text();
alert(thirdCell);
http://jsfiddle.net/2URV7/

This will not work because tr has no text. it has TDs. you can apply though html() to get the innerHTML of the tr, or use text() on tds if they actually contain text.

you can get all cells from each row by 0 based index
Rows.each(function(index, element) {
var thirdCell = $(this.cells[2]).text();
alert(thirdCell);
});
or you can get it in original selector
var Third = $("#tableid tbody tr > td:nth-child(3)");
Third.each(function(index, element) {
var thirdCell = $(this).text();
alert(thirdCell);
});