Develop Reference

How to get the <tr> of a clicked element in a table

I have a table with several <tr>s and each one has several <td>s. The content of these columns can be another html element (for example a textbox) or just text.
My question: how I can get the rest of the siblings of one clicked element inside this column? I mean, how I can know to which <tr> this element belongs, to <tr> #3 or <tr> #5?I don't have a index per <tr> to control
Example:
If I click the textbox of column #1 in row #5, I want that the content of column #2 in row #5 change. I don't know how to do it because my <tr> doesn't have an index.

Using jQuery, add this to the event handler. This will provide you with a collection of table cells:
var columns = $(this).closest('tr').children();
// .eq() is 0-based, so this would retrieve the fourth column
columns.eq(3);

You can find the index of a row using the index() function.
$('input').click(function(){
var index = $(this).parents('tr').index();
alert('you click an input on row #' + index);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td><input type="text"></td>
<td></td>
</tr>
<tr>
<td><input type="text"></td>
<td></td>
</tr>
<tr>
<td><input type="text"></td>
<td></td>
</tr>
</table>

Use closest to get the parent TR element.
$('your_element').click(function(){
var tr = $(this).closest('tr');
var element1 = $(tr).find('element_to_find');
});

You can also use the :eq operator to find the td.
$('your_element').click(function() {
var tr = $(this).closest('tr');
var col3 = $("td:eq(2)", tr);
}

how to pull href attribute inside the table element

I have table and each cell of the table has specific url. I am trying to get the url on specific cell using jquery. Problem here is no class or id is defined for table, row and column. Just want to pull the href attribute using the tags only.
<table>
<tr>
<td><a href='MytestSite11.com'>site21</a></td>
<td><a href='MytestSite12.com'>site22</a></td>
<td><a href='MytestSite13.com'>site23</a></td>
</tr>
<tr>
<td><a href='MytestSite21.com'>site21</a></td>
<td><a href='MytestSite22.com'>site22</a></td>
<td><a href='MytestSite23.com'>site23</a></td>
</tr>
<tr>
<td><a href='MytestSite31.com'>site21</a></td>
<td><a href='MytestSite32.com'>site22</a></td>
<td><a href='MytestSite33.com'>site23</a></td>
</tr>
</table>
I am trying to get href element of second row second column which is MytestSite22. I have tried following jquery code but it is returning me undefine.Not sure what is missed on this.
$(function () {
var $row = $('table tr').eq(1);
var $col=$row.eq(1)
alert($col.attr('href'));
});

You forgot to specify the element in your second variable:
var $col=$row.find('td').eq(1)
Then, specify the anchor inside that:
alert($col.find('a').attr('href'));
For what it's worth, the dollar character as a variable prefix is conventionally used to indicate an array or set. Here, you're using it on a single item.

here is it the href element of second row second column
$("table tr:eq(1) td:eq(1) a").attr("href");

you can just do it all in one go: $('table tr:nth-child(2) td:nth-child(2) a').attr('href');
$(document).ready(function() {
alert($('table tr:nth-child(2) td:nth-child(2) a').attr('href'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td><a href='MytestSite11.com'>site21</a></td>
<td><a href='MytestSite12.com'>site22</a></td>
<td><a href='MytestSite13.com'>site23</a></td>
</tr>
<tr>
<td><a href='MytestSite21.com'>site21</a></td>
<td><a href='MytestSite22.com'>site22</a></td>
<td><a href='MytestSite23.com'>site23</a></td>
</tr>
<tr>
<td><a href='MytestSite31.com'>site21</a></td>
<td><a href='MytestSite32.com'>site22</a></td>
<td><a href='MytestSite33.com'>site23</a></td>
</tr>
</table>

This is a straightforward way to do it:
var $row = $('table tr:nth-child(2)'), // row
$col = $row.children('td:nth-child(2)'), // column
$a = $col.children('a'); // anchor
alert($a.attr('href'));
The :nth-child(n) selector will match an element that's at a certain index amongst children of a shared parent element. Note that it's 1-based, not 0-based (like JavaScript arrays, for example), so the second child is :nth-child(2), the third child would be :nth-child(3), etc.
Here's a CodePen example.

Try this:
var a = $("tr").eq(1).find("td").eq(1).find("a").attr("href");
alert(a);

Also one of possibilities where you can retrieve the value with function:
getMe(RowNumber,ColumnNumber);
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function(e) {
getMe(2,2);
});
function getMe(rowN, colN) {
var link = $("tr:eq("+(rowN-1)+") td:eq("+(colN-1)+") a").attr("href");
alert(link);
}
</script>

jQuery read all TD's table data

With jquery I am reading table:
$('#lc_searchresult > table > tbody > tr').each(function() {
var data = $(this).find("td:eq(5)").html();
alert(data);
});
it is working fine if TR tag has one TD inside like:
<tr>
<td>654321</td>
</tr>
but If I am having two TD's then I am geting just first one:
<tr>
<td>654321</td>
<td>13456</td>
</tr>
How can I get all of TD's from TR with $(this).find("td:eq(5)").html()

$('#lc_searchresult > table > tbody > tr').each(function() {
$(this).children('td').each(function(){
var data = $(this).html();
alert(data);
})
});

Why eq it? You're using .each() which means you will return an array of <tr>'s.
$('#lc_searchresult > table > tbody > tr').each(function() {
var data = $(this).find('td').text();
alert(data);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="lc_searchresult">
<table>
<tbody>
<tr>
<td>654321</td>
<td>13456</td>
</tr>
<tr>
<td>4353535</td>
<td>3453553</td>
</tr>
</tbody>
</table>
</div>
JSFiddle.

this should work,
**note thier is no need to use :eq selector here,
READ ABOUT JQUERY :eq selector
$('#lc_searchresult > table > tbody > tr').each(function() {
var data = $(this).html();
alert(data);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id='lc_searchresult'>
<table>
<tr>
<td>654321</td>
<td>13456</td>
</tr>
</table>
</div>

td:eq(5) : mean you get data of TD with exactly index. so you can't get all data of TR with eq().

well when you write
var data = $(this).find("td");
the variable data contains an array of all the td's not just the first one
if you say
data.each(function(){
alert($(this).html())
})
you will get all the td's

jQuery: skipping first table row

This is the HTML:
<table id="tblTestAttributes">
<thead>
<tr> <th>Head 1</th> <th>Head 2</th> </tr>
</thead>
<tbody>
<tr> <td id="txtDesc">Item 1</td> <td id="ddlFreq">Assume a DropDownList Here</td> </tr>
<tr> <td id="txtDesc">Item 1</td> <td id="ddlFreq">Assume a DropDownList Here</td> </tr>
<tr> <td id="txtDesc">Item 1</td> <td id="ddlFreq">Assume a DropDownList Here</td> </tr>
</tbody>
</table>
This is the javascript to get the values of each row:
var frequencies = [];
if ($('#tblTestAttributes').length) {
$('#tblTestAttributes tr').each(function () {
var t = $(this).find('td[id^="txtDesc"]').text() + ";" + $(this).find('[id^="ddlFreq"] option:selected').val();
alert(t);
frequencies.push(t);
});
}
I want to avoid the first row, which contains th elements which are just display headers and don't contain any data.
So I changed the selector to this:
#tblTestAttributes tr:not(:first-child)
This is skipping the second tr as well. What is happening here?

Simple you can use below code
$('#tblTestAttributes tr:not(:has(th))').each(function () {

In terms of performance, using .find() will be better than resolving the selector with Sizzle.
$('#tblTestAttributes').find('tbody').find('tr').each(function () { ... });
Here's the jsPerf to show it.

use
#tblTestAttributes tr:gt(0)
or
#tblTestAttributes tbody tr
I would recommend the 2nd, because it may take advantage of querySelectorAll and should be the fastes solution.
your approach didn't work as expected, because the 2nd tr is also a first-child(of tbody)

Use tr + tr selector, which gets all tr that appear after another tr, so the first one is skipped.
Also no need to check if table exists, as in that case $.each wouldn't even get executed.
var frequencies = [];
$('#tblTestAttributes tr + tr').each(function () {
var t = $(this).find('td[id^="txtDesc"]').text() + ";" + $(this).find('[id^="ddlFreq"] option:selected').val();
alert(t);
frequencies.push(t);
});
After your edit:
Simply select only all tr inside tbody:
$('#tblTestAttributes tbody tr').each(function(){
...
}

It happens because the second row is, in fact, the first child of the tbody just like the first row is the first child of the thead.
To only take the elements you need, I'd suggest something nearer from your need :
#tblTestAttributes tr:has(td)
Don't forget to get rid of those duplicate txtDesc id, this is illegal in HTML, use a class instead.

How to get the content of a table rows and columns

Can anyone give me an idea on how I will count the table column and table row and get the id, attribute and the content of a each cell (the cell is contenteditable). What tools do I have to use?
e.g.
<table>
<tbody>
<tr>
<td id='1A' rowspan=2>Rowspan 2</td>
<td id='1B'>22222</td>
<td id='1C'>33333</td>
</tr>
<tr>
<td id='2B' colspan='2'> Colspan2</td>
</tr>
<tr>
<td id='3A' style='color:red'>Whaterver</td>
<td id='3B' style='font-weight:bold'>Askyourmother</td>
<td id='3C'>sigh</td>
</tr>
</tbody>
</table>
I'm using Jquery (Javascript).

You can make use of jQuery to get it and then do whatever you want with it.
In this case I just print it in the console.
//for each TR...
$('table tr').each(function(){
//for each TD....
$(this).find('td').each(function(){
console.log($(this).text()); //do whatever you want with the text
console.log($(this).attr('id'));
console.log($(this).attr('any_other_attribute'));
});
});

you can use jQuery.
To get all tr use it as below.
var count = $('table tr').length;
above will out put count of all the tr inside table.
To get the ID attribut of DOM use .attr()
var tableID = $('table').attr('id');
above will out-put the ID attribute of the DOM.
To get the text inside of DOM use .text() or .html()
var text = $('table tr td').text();
var html = $('table tr td').html();
above will out-put the HTML or TEXT inside of the selected DOM.

use length to count tr and each to get ids and contents.
var table=$('table tr');
var trCount= table.length; //count tr
alert('trcount='+trCount);
$('table tr td').each(function(){
var tdID=$(this).attr('id'); //get id
var tdcontent=$(this).text(); //get content
alert('id='+tdID);
alert('content='+tdcontent);
}) ;
fiddle here