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

Selecting a table data using javascript/jquery

Hi i am new to javascript and jquery.I just like to know if there is any way of selecting a table data using this format:
$("#myTable").row[index1][index2];
where index1 is row index, index2 is column. Anything similar is fine too.

Try this : you can use .eq() in jQuery to traverse through tr and td with specified index
var td = $("#myTable").find('tr:eq('+index1+')').find('td:eq('+index2+')');
var data = $(td).text();// you can use .html() if you need html inside td

Try This:
$(function(){
$('input').click(function()
{
var t= $(this).attr('class');
var text= $('.time'+t).text();
alert(text);
});
$('td').click(function()
{
var index = this.cellIndex;
alert($('tr:first').find('td').eq(index).text());
});
});
http://jsfiddle.net/oL4pfgda/

It will iterate your table cells and print the values-
$("#myTable>tr>td").each(function () {
var cell_value = $(this).html();
alert(cell_value);
})

How to change row number when add\delete rows

I have integrated add row and delete row functionality in my table. If i add row second row number is also 1. I need to change number of each row as per every add and delete like 1, 2 etc.
I used the code from this fiddle http://jsfiddle.net/MJGV2/6/.
How to achieve this? Any help would be appreciated. Thanks.

You can add this:
var renum = 1;
$("tr td strong").each(function() {
$(this).text(renum);
renum++;
});
See this Fiddle demo.
There are a lot of errors in your code - for example all id needs to be unique and you should fix this.

For example, you can add call recalculate function, like this:
function recalculate() {
var i = 1;
$(".numberRow").each(function() {
$(this).find("strong").text(i++);
});
}
Where numberRow is css class on td, where store number of row.
I add this in your jsfiddle example

There were lot of things missing in your code. i have tuned everything properly
JS CODE:
$("input[type='button'].AddRow").on('click',
function () {
if ($(this).val() == 'Delete') {
trSet = $(this).closest('tr').nextAll();
currIndex = $(this).closest('tr').find('td span').html();
$(this).closest('tr').remove();
trSet.each(function () {
$(this).find('td span').html(currIndex);
currIndex++;
});
count = currIndex - 1;
} else {
var $tr = $(this).closest('tr').clone(true);
var $input = $tr.find('input.startdatum');
++count;
$tr.find('td span').html(count);
$(this).val('Delete');
var id = 'datepicker' + count;
$input.attr('id', id).data('index', count);
console.log(count);
$tr.appendTo($(this).closest('table'));
setdatepicker();
}
});
LIVE DEMO:
http://jsfiddle.net/MJGV2/14/
Happy Coding :)

looping javascript didn't work

I'm trying to get data from app engine datastore using javascript and json. it's also allowed jsonp service, here the javascript code:
$.getJSON("http://1.handy-post-402.appspot.com/show?callback=?", function(json) {
for (var i = 0; i < json.length; i++) {
var map = json[i].propertyMap;
var content = map.isi;
var user = map.No_HP;
var date = map.tanggal;
$('#date').text(date);
$('#nohp').text(user);
$('#content').text(content);
}
});
you can also check it here: http://jsfiddle.net/YYTkK/7/
unfortunately, it just retrieve 1 latest data from the datastore. am I doing something wrong with this code?
thanks in advance.

You're not appending elements, but simply changing the value of the same 3 elements in question three times. So you simply overwrite the value you put into it the time before. The easiest way to solve this is to designate the existing tr as a .template and clone it in your loop, make the necessary changes (filling in the values) and then appending it.
Fixing some other unclear things this gives the following
$.getJSON("http://1.handy-post-402.appspot.com/show?callback=?", function(records) {
for (var i = 0; i < records.length; i++) {
//Clone the row/unit which we will be using for each record (the class should refer to the type of item it /actually/ is)
row = $(".row.template").clone();
//The template class is hidden, so remove the class from the row/unit
row.removeClass("template");
var map = records[i].propertyMap;
var content = map.isi;
var user = map.No_HP;
var date = map.tanggal;
//Make the required changes (find looks for the element inside var row)
row.find('.date').text(date);
row.find('.nohp').text(user);
row.find('.content').text(content);
//Append it to the parent element which contains the rows/units
$("tbody").append(row);
}
});
See functional demo: http://jsfiddle.net/YYTkK/13/

You must append a new row in the table in every loop. Here's the working fiddle.
fiddle
$.getJSON("http://1.handy-post-402.appspot.com/show?callback=?", function(json) {
for (var i = 0; i < json.length; i++) {
var map = json[i].propertyMap;
var content = map.isi;
var user = map.No_HP;
var date = map.tanggal;
var row = '<tr><td>'+date+'</td><td>'+user+'</td><td>'+content+'</td></tr>';
$('#valuetable').append(row);
}
});

what you have to do is create dynamic "tr" s and append to tbody and use thead for header and separate the body using tbody and create tr s on each iteration and after the loop append that tr to tbody. that will do the job, as you do now it will override the values at each iteration.

#chamweer answer is correct you have to create a new tr with td's dynamically
like this:
http://jsfiddle.net/YYTkK/14/
Because you're overriding the same td's over and over again.
$.getJSON("http://1.handy-post-402.appspot.com/show?callback=?", function(json) {
for (var i = 0; i < json.length; i++) {
var map = json[i].propertyMap;
var content = map.isi;
var user = map.No_HP;
var date = map.tanggal;
// create a temporary tr
var tr = $("<tr />");
// append to the tr the td's with their values
tr.append($("<td />").text(date), $("<td />").text(user),
$('<td />').text(content));
// finally append the new tr to the table's tbody
$("#js-tbody").append(tr);
}
});

JavaScript DOM : add an attribute to a <tr>

I want to create a JavaScript function that parses my HTML page, get the Table by it's ID, and after that, add a class attribute to each <tr> as if the line is the 1st, I'll add :
class="line1" to the <tr>
but if the line is the second, I'll add class="line2" to the <tr>
How to do please

If I understand you corrrectly, you want to alternate the class names to get some kind of zebra style right?
var table = document.getElementById('yourTableId');
var rows = table.rows;
for(var i = 0, l = rows.length;i < l; i++) {
rows[i].className = 'class' + ((i%2) + 1);
}
See the HTML DOM Table Object.

its very easy in jquery ... as below :-
$(document).ready(function() {
//for table row
$("tr:even").addClass("AlternateBG1");
$("tr:odd").addClass("AlternateBG2");
})
BUT IN JQUERY...

var table = document.getElementById("yourTableId");
for(var i in table.rows){
table.rows[i].className = 'line'+(i+1).toString();
}

It is easy without jQuery:
oTBody=document.getElementById("tBodyId");
//for (key in oTbody.childNodes) {
for (var nPos=0, nLength = oTbody.childNodes.length; nPos<nLegth; nPos++)}
oRow = oTbody.childNodes[nPos];
if (oRow && oRow.tagName && oRow.tagName.toLowerCase() == "tr") {
oRow.className = (bNormalRow? sClass1:sClass2);
bNormalRow = !bNormalRow;
}
}

With jQuery is really simple, do something like:
var i = 1;
$("#myTable tr").each(function() {
$(this).addClass("line"+i);
i++;
});
Where #myTable is your table id, and $(this) inside each function will be the current element on the cycle.