We Keep Coding

how to get the id of a tr inside the loop

hi i got the tr content like this way simil
var td = $("tr td"); // get first child of all the td elements
var htmlContent = []; // initilize an empty array
for (i = 0; i < td.length; i++) {
htmlContent[i] = $(td[i]).text();
trid[i] = $(td[i]).attr("id");
}
i want the tr id so i use this code
trid[i] = $(td[i]).attr("id");
but this is not good

You can use .parent() to get the tr, and then its id.
var htmlContent = []; // initilize an empty array
$('tr td').each(function () {
htmlContent.push($(this).text());
console.log($(this).parent().attr('id'));
});
Here is a simple fiddle: https://jsfiddle.net/hxsbLws2/1/

You should use td only since it is already a DOM object. You don't need to use it as a selector again like this $(td) ..
Then just specify the index td[i]
trid[i] = td[i].attr('id');

Removing class of singular row in a table

When I click a row in a HTML table, I want to remove the highlightedRow class from the previously clicked row, and add it to the new one.
$(function () {
$("table tr").click(function (e) {
//remove class
var dataTable = $("#TemplateData");
dataTable.removeClass("highlightedRow");
//add class
var dTable = $(this);
dTable.addClass("highlightedRow");
g_previouslyClickedRow = $(this).index()
}
Problem is:
var dTable = $(this);
dTable.addClass("highlightedRow");
is getting the row element while:
var dataTable = $("#TemplateData");
dataTable.removeClass("highlightedRow");
is getting the table element.
How can I use the table element and the previouslySelectedRow value?
g_previouslyClickedRow = $(this).index()
to get the row element?

You need to target proper element to removeClass
$("table tr").click(function (e) {
//remove class
$('.highlightedRow').removeClass('highlightedRow');
//add class
$(this).addClass("highlightedRow");
}
When you say :
var dataTable = $("#TemplateData");
//dataTable will have reference to your table if #TemplateData is the id of your table
dataTable.removeClass("highlightedRow");
//the above line will just remove class from table as you have stored reference of your table
//in dataTable
and when you say:
var dTable = $(this);
//$(this) will be referring to current element context inside click
dTable.addClass("highlightedRow");
//and thus the clicked element, whose reference is stored in dTable, will get the class
//highlightedRow.

Do Simply
$(".highlightedRow").removeClass("highlightedRow");

$("table tr").click(function (e) {
g_previouslyClickedRow = $('.highlightedRow').index();
//remove class
$('.highlightedRow').removeClass("highlightedRow");
//add class
$(this).addClass("highlightedRow");
}

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

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

Is it possible to add table cells dynamically and give them a different id?

In this fiddle you see a table with a select-field where you should select a name.
Below there are 5 input-fields where one could type in some text and 3 input-fields which are set to readonly.
I wanted to ask whether there is a way to add table cells dynamically when clicking on the button. The result should like this fiddle. The id should be incremented by i+.
I tried cloning the code, but could't figure out how to do increment the id of the cloned input-field. The only input-fields I do not want to clone are the readonly input-fields.
Do you have an example code or a link you would recommend? A hint to start would be helpful as well.
I've been searching the net already, but wasn't able to find something.

Here is the code you ask (i added an id to the button to target it easy)
$('#add').click(function(){
$(this)
.closest('table')
.find('tr td:first-child:not(:has([readonly]))')
.each(function(){
var $this = $(this);
$this
.clone()
.each(function(){
var $inp = $(':input',this);
var id = $inp.attr('id');
var idwithoutnum = id.replace(/([0-9]+)$/,'');
var maxId = $(':input[id^='+idwithoutnum+']:last').attr('id');
var idnum = parseInt(/([0-9]+)$/.exec(maxId)) + 1;
var newid = id.replace(/([0-9]+)$/,idnum);
$inp.attr('id', newid);
alert(newid); // remove this line
})
.insertAfter($this
.closest('tr')
.find('td:last')
);
});
});
example at http://jsfiddle.net/fMZDd/7/

I would choose not to use tables for dom manipulation. Either way, here is how you could do it.
to add a table cell
var td = document.createElement("td")
var idVals = prevId.match(/^([a-z_]*)([0-9]+)$/)
td.innerHTML = "<input type='text' id='"+ idVals[1] + (parseInt(idVals[2]) + 1) +">";
tr.appendChild(td)
Hope this helps.