Develop Reference

How to get any column of any row of a Table in HTML?

Suppose there is Table with variable number of rows of fixed number of columns, and suppose each row has a button too, now I want to select for example a column's value(let's say this selected column is textarea, so I select it's content) when that row's button is clicked.
For example in above image I want that if submit is pressed than all data of 'textarea' of corresponding row should be stored in a variable.

You can use the jQuery closest() function to find an element near the clicked button. Add click handlers to the buttons and then traverse up to find the textarea.
$('.button').on("click",function(){
var thisRowsTA = $(this).closest("textarea");
console.log($(thisRowsTA).val());
});

A simply way is to:
Put an ID pattern to your textareas, like: txt_area_1, txt_area_2, txt_area_3.
Then, on the Click Event of your buttons, make them catch the corresponding textarea in their row. Use the ID patterns to do this.
Post your code for further help.

You will need to ad an event handler for each button. Inside of that you can write something like this.
function eventHandler(e){
var row = this; // start at the button
while(row.nodeName != 'TR' && row.parent){
// go up till we find the row
row = row.parent;
}
var textArea = row.querySelector('textarea');
var value = textArea.value;
// do something with supplied feedback.
}
In order to attach the handlers, you would do something like this.
function attachTableEvents(){
var table = document.querySelector('table'); // or more specific selector if needed
var buttons = table.querySelectorAll('button');
for (var i = buttons.length; i--;){
buttons[i].addEventListener(eventHandler);
}
}

Counting on the DOM structure is really BAD.
I would put an attribute in my controls that holds the line number. Then when clicking an element you can easily query the DOM by element type and the property value to get any elements in this line.
Later if you change to DIVs or change structure your will still run correctly

Insert Row(child) in table using JavaScript

I have table containing 4 main rows and one (expand or collapse) button.On click of (expand or collapse) button i want to insert one more row in middle of all rows(which result in total 8 rows) by iterating the table rows.How to do this using Javascript?See the image below.Any suggestion.
This is the code i have return on click of Expand or Collapse button,
jQuery('#btnId').click(function() {
var that = this;
$("#example tbody tr").each(function(i) {
//what code need to add here
});
});

Due to the fact, that you haven't provided a code example, I only can suggest one way to achieve this.
You can determine the row above the row you'll want to insert by an id on the tr or by a css selector like :nth-of-type(4) for example.
After that, you can use this row as jquery element (example: $("tr#yourrow")) and append a row after it using append().
Example: $("tr#yourrow").append("<tr>... your row definition ...</tr>")
Based on the updated question:
jQuery('#btnId').click(function() {
var that = this;
$("#example tbody tr").each(function(i, object) {
$(object).after("<tr>... your row definition ...</tr>")
});
});
The row definition should be done by yourself. I don't know the logic behind the iteration in your case. But I think you'll get it. :)

Getting the Control inside a table

I'm trying to get the control which is inside of a cell table; in my table I have different controls, labels, checkboxes, etc.
I basically need to get the control which is used in that table
var x = document.getElementById('myTable').rows[0].cells;
alert(x[0].innerText);
//alert(x[3].innerHTML);
if (x.Control == checkbox) {
x.checked = true;
}
This will be in a loop but for now I just need to be able to check the checkbox by grabbing the control and setting that control to true
Any hints/help would be great

I doesn't really understand what you exactly need is it
document.getElementById("checkbox").checked = true;
here checkbox is the id of a particular checkbox

I would put a unique id on the form element instead and use that to grab it. In this way you can change the structure in the future. Example: perhaps you no longer want to use a table grid, but a grid of divs.
When you use innerHTML you will might also grab textnodes and other things you put in the cell.
An alternative - if you really want to find a specific cell in a table - is to give each cell a unique id on the form "cell-4-5" where 4 is the row and 5 is the column.
[EDIT]
If you want to have the cell contents returned as a DOM-object then childNodes can be used:
var x = document.getElementById('myTable').childNodes[0].childNodes[0].childNodes
If you want to have the cell contents returned as a string then innerHTML can be used:
var x = document.getElementById('myTable').childNodes[0].childNodes[0].innerHTML
To check if the checkbox is checked you need to keep it as a DOM element and thus use the first version.

jQuery tr.next always returns row at index 1

I have a HTML table that automatically adds a row when you enter data on the last row. Because of this automatic generation, the standard tab functionality breaks down. You can see an example of this table here. As such, I use jQuery to bounce back up to the parent row of the first ant last elements when shift-tab or tab is pressed. The code is relatively simple. . .
$(this).parents('tr').next('tr');
No matter what I do, $(this).parents('tr').index() is always returning 0. Thus next() always jumps to the second row of the table, even if I tab from the last field on the ninth row.
Any ideas? Is there a way that I can rebuild the table's tab index after I've added a row, or does anyone know why the row always thinks that it's index is 0?

I could not comment to Sushanth's answer so I'll give my own:
You just need to use:
$(this).closest('tr').index()
The problem with Shushanth's code is that it is passing to index() a jQuery object which matches all the tr in the table. It would work if it was (subtle difference):
$(this).closest('tr').index('#tableid tr')
See my fiddle here.

Try using index with a specific selector.
$tableRows = $('#tableid tr');
$currRow = $(this).closest('tr');
var index = $currRow.index($tableRows);

how to do a group "unhighlight" on highlighted rows in a table

I have a table in which any time a user clicks on one of the rows it highlights the row. However as of if I have multiple rows highlighted i have to click each individual highlighted row to get rid of the highlight. I want to make it so when an individual is not clicking on the table it will get rid of the highlight on all the rows. This is the code that I am using.
//this highlights the table that has been clicked on
$('.tr_highlight').live('click',(function () {
$(this).parent().toggleClass("tr_highlight_ed");
}));
How do I get it to unhighlight(if thats a word) when clicking anywhere but the table?

You really need to post an example of the rendered markup. You don't want to do a toggleClass, you would do a removeClass selecting the parent nodes...
Assuming the following markup...
<body>
...
<table id="myTable">...</table>
...
</body>
You could bind the following..
$('body').click(function(evt){
//evt.target is what was clicked on, which bubbles up to body
//if it's anything inside #myTable, you will get the #myTable
var el = $(evt.target).closest('#myTable');
//if you didn't get #myTable, you clicked outside the table
//remove the given class from all the tr's
if (!el.length) $('#myTable .tr_highlight_ed').removeClass('tr_highlight_ed');
});

$(document).bind('click.table', function (e) {
if ( $("#my-table").has(e.target).length === 0 ) {
$("#my-table").find("tr").removeClass('tr_highlight_ed');
}
});
Everytime a user clicks anywhere on the page, it will check if the element that was clicked is inside the table; if not, we unhighlight all the rows.