Develop Reference

How to find an index and value of rows specify by column from tables by Jquery?

I want to select a value of my table by row and column position as below description.
This tables was used by appendTo method to .tbody selector and then I've got more rows as below I just show two of rows and each of rows I have .Open selector was used for user click to get a value on column number 4 by current position or index of that row.
Here HTML:
<table class"mytable">
<tbody class="tbody">
<tr>
<td>1</td>
<td>THB-PP-000001</td>
<td>1005-000001</td>
<td>100</td> //this is the column id I want to get it
<td><button type="button" class="open"> Open by Id </button></td>
</tr>
<tr>
<td>1</td>
<td>THB-PP-000001</td>
<td>1005-000001</td>
<td>101</td> //this is the column id I want to get it
<td><button type="button" class="open"> Open by Id </button></td>
</tr>
</tbody>
</table>
This is JS:
$(document).on("click", ".open", function () {
var inde = $("table tbody tr td:nth-child(4)").text();
console.log(inde);
});
Thank for help

Try to use .parent() along with .prev() to get your required data,
$(document).on("click", ".open", function () {
var inde = $(this).parent("td").prev().text();
console.log(inde);
});
If your html is having a tbody as a static node then you could use .tbody in the place of document.

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 limit closest() to traverse only one row

I have a table on which if I click any row it is supposed to return the row "id" number.I have used closest() function.But the issue is the closest() selects all the "tr" below it. Is there any way to limit the function to traverse only one row data.
For example my table
<tr id="0">
<td>data0</td>
</tr>
<tr id="1">
<td>data1</td>
</tr>
<tr id="2">
<td>data2</td>
</tr>
<tr id="3">
<td>data3</td>
</tr>
<tr id="4">
<td>data4</td>
</tr>
If I click the third row that is id=2, it should return only that individual id and td(data2).
This is the code that I am trying as for now.
$("#myTable tr").click(function(){
trid = $(this).closest('tr').attr('id');
alert(trid);
return trid;
});
I have tried using next() or find() but I end up getting the Undefined error.Thanks.

I think you have misunderstood the concept of .closest(). It traverses up to the parents upward, while .find() traverses downwards to the children/grandchildren.
So as per your code it seems that you want to have the id of the clicked element. then you can just do this:
trid = this.id;
as in your code this refers to the tr you are clicking on.
Note:
Just noticed that you are using a global var named trid because it does not have the var keyword. So if you have accidently used it then you can add var trid like this in the above code.

$(document).on('click', 'td', function() {
var result = $(this).closest('tr').attr('id');
alert(result);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr id="0">
<td>data0</td>
</tr>
<tr id="1">
<td>data1</td>
</tr>
<tr id="2">
<td>data2</td>
</tr>
<tr id="3">
<td>data3</td>
</tr>
<tr id="4">
<td>data4</td>
</tr>
</table>

Try this
$("#myTable tr").click(function(){
trid = $(this).attr('id');
alert(trid);
//if you want to get to the td of it
var tdVal = $(this).find('td').html();
});

by clicking on tr, you do not need to use .closest() to access its id, just get its id using the .attr('id')or .prop('id') or even simply .id as follows:
$("#myTable tr").click(function(){
trid = $(this).attr('id');
alert(trid);
});

how to get the value of tr of a table using jquery on click

I have an example table
<table class="table">
<tr value="1" class="side-link">
<td>one</td>
<td>two</td>
</tr>
<tr value="2" class="side-link">
<td>one</td>
<td>two</td>
</tr>
</table>
I want to get the value of the selected tr on click function.
what I've tried so far
$(".table").on('click','.side-link',function(e){
e.preventDefault();
var id = $(this).attr('value');
alert(id);
});
the problem is I cannot address this to the respective "tr" I click , instead it gets the value of .table.
Can anyone solve the issue here? I would be really grateful! THanks :)
Note: it needs ( on click ) because I've to replace tr using ajax and the new elements wont be recognized by just using click function !!
Jquery version 1.9.1

$(".table").on('click','tr',function(e){
e.preventDefault();
var id = $(this).attr('value');
alert(id);
});
JSFiddle

You're (as you say) getting the value of the table, not the TR
Amend your code like this:
$(".table tr").on('click','.side-link',function(e){
e.preventDefault();
var id = $(this).attr('value');
alert(id);
});
That should get the correct value.

well use HTML5 data attribute.. this is the exact reason, why data attribute was introduce in HTML5. And make sure you are using jquery's latest version (> 1.6) .on was introduced
only after jquery 1.6
HTML
<table class="table">
<tr data-value="1" class="side-link">
<td>one</td>
<td>two</td>
</tr>
<tr data-value="2" class="side-link">
<td>one</td>
<td>two</td>
</tr>
</table>
jQuery
$(".table").on('click','.side-link',function(e){
e.preventDefault();
var id = $(this).data('value');
alert(id);
});

Okay, look this for get Tr value or Td value:
HTML Code:
<table class="table" border='1'>
<tr value="1" class="side-link">
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
<tr value="2" class="side-link">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
jQuery Code:
$(".table").on('click', 'tr', function () {
var trValue = $(this).attr('value');
var tdValue = $(this).children('td').map(function (index, val) {
return $(this).text();
}).toArray();
// all td value with comma seprated
alert(tdValue);
// current tr attr value
alert(trValue);
});
Live Demo (JsFiddle)

Your code also working see Demo, check that you have included jquery version >= 1.7 or try to write your code in $(function(){...}) it may run before your table renders
You can also try it like,
$(function(){
$(".table .side-link").on('click',function(e){
e.preventDefault();
var id = $(this).attr('value');
alert(id);
});
});
Demo
Also if it is id then why you used value use id="1" and so on..
Updated if above not works then try this which never fails(IMHO) if your html is valid,
$(function(){
$(document).on('click',".table .side-link",function(e){
e.preventDefault();
var id = $(this).attr('value');
alert(id);
});
});

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