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);
});
Related
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.
I have a table like below
(full screen: http://i.stack.imgur.com/7Mluq.png)
Here you can see the "down" arrow on some td.
for example the <td> for 2nd row and 4th column is:
<td>
doc4
<span class="arrow"></span>
<div class="toggle" style="display: none;">
<div>image</div>
<div>testingwrongtype</div>
<div>vsd_2</div>
<div>BMP</div>
</div>
</td>
Say if user clicks on arrow of "2nd row and 4th column (which is doc4)" then I want to get the row number in some variable for that.
var row_clicked = 2
How can I achieve this?
You can use .parent() or .closest() to get the parent tr of clicked td along with .index() to get the index of this tr :
$('table tr td').click(function() {
var row_clicked = $(this).closest('tr').index(); // or $(this).parent().index();
});
Try this
$('table .arrow').click(function(e){
var trindex=$(this).parent().parent().index();
alert(trindex);
});
SAMPLE HERE
try :
$('table td').click(function() {
row_clicked = $(this).closest('tr').index();
});
Ah why did you delete your old question I almost had it done writing. So I'll wirte it once again.
assuming "this" is your clicked cell
var td = this;
var i_td = 0;
while( (td = td.previousSibling) != null )
i_td++;
var i_tr = 0;
var tr = td.parentNode;
while( (tr = tr.previousSibling) != null )
i_tr++;
your clicked row is i_tr and column is i_td, you can store this in your cookie from previous question and on document ready just call the yourtableselector.childNodes[i_tr].childNodes[i_td] and you have your previously clicked cell :)
by clicking on that arrow you can get the same thing.
try this.
$('.arrow').click(function(){
console.log($(this).parent().parent().index());
});
You need to first add class to the table or if you already have it use the same.
Or you directly use 'table' or table's Id.
I'll provide small example.
<table border='1' class='abc'>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
$('.abc').find('tr').click(function(){
console.log("row clicked "+($(this).index()+1));
});
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);
});
});
I have a question, I am trying to make some manipulation with html tables. I have two tables,
and when I hover first row from the first table, it should highlight both rows from both tables.
I have found a solution, in making this simple function:
<script type="text/javascript">
function matchrow(){
document.getElementById('row1').style.backgroundColor='#f5f5f5';
}
function unmatchrow(){
document.getElementById('row1').style.backgroundColor='white';
}
</script>
On the first table I have:
<tr onmouseover="matchrow()" onmouseout="dismatchrow()" >
on the second table I have:
<tr id="row1" >
So when I put mouseover the first row from the first table, the first row from the second table highlights.
My question is, how to make it for the every single row, especially if it will be dynamic table.
Hope I was clear.
I've implemented this with jQuery. It doesn't use obtrusive JS and doesn't require additional IDs for rows.
Also, CSS classes are more preferable than inline styles.
HTML:
<table id="t1">
<tr><td>......</td></tr>
<tr><td>......</td></tr>
</table>
<br/>
<table id="t2">
<tr><td>......</td></tr>
<tr><td>......</td></tr>
</table>
CSS:
tr.active > td
{
background-color:#f00;
}
JS:
$(function(){
$("#t1 tr").hover(
function(){
$(this).addClass('active');
$('#t2 tr:eq(' + $('#t1 tr').index($(this)) + ')').addClass('active');
},
function(){
$(this).removeClass('active');
$('#t2 tr:eq(' + $('#t1 tr').index($(this)) + ')').removeClass('active');
}
);
});
Here is live fiddle: http://jsfiddle.net/keaukraine/KBEhA/1/
You can use the div id as a parameter in the function
<tr onmouseover="matchrow('row1')" onmouseout="dismatchrow('row1')">
function matchrow(divid){
document.getElementById(divid).style.backgroundcolor='#F5F5F5';
}
function dismatchrow(divid){
document.getElementById(divid).style.backgroundcolor='white';
}
You can use jQuery for this.
Use the .eq() and .index() functions.
A way of doing it:
HTML:
<table border="1">
<tr>
<td>Row1</td>
</tr>
<tr>
<td>Row2</td>
</tr>
<tr>
<td>Row3</td>
</tr>
<tr>
<td>Row4</td>
</tr>
</table>
<table border="1">
<tr>
<td>Row1</td>
</tr>
<tr>
<td>Row2</td>
</tr>
<tr>
<td>Row3</td>
</tr>
</table>
JS:
$('table tr').hover(function()
{
var index = $(this).index();
$('table').each(function()
{
$(this).find('tr').eq(index).css('color', 'red');
});
});
A working example can be found here.
Say I had links with up/down arrows for moving a table row up or down in order. What would be the most straightforward way to move that row up or down one position (using jQuery)?
There doesn't seem to be any direct way to do this using jQuery's built in methods, and after selecting the row with jQuery, I haven't found a way to then move it. Also, in my case, making the rows draggable (which I have done with a plugin previously) isn't an option.
You could also do something pretty simple with the adjustable up/down..
given your links have a class of up or down you can wire this up in the click handler of the links. This is also under the assumption that the links are within each row of the grid.
$(document).ready(function(){
$(".up,.down").click(function(){
var row = $(this).parents("tr:first");
if ($(this).is(".up")) {
row.insertBefore(row.prev());
} else {
row.insertAfter(row.next());
}
});
});
HTML:
<table>
<tr>
<td>One</td>
<td>
Up
Down
</td>
</tr>
<tr>
<td>Two</td>
<td>
Up
Down
</td>
</tr>
<tr>
<td>Three</td>
<td>
Up
Down
</td>
</tr>
<tr>
<td>Four</td>
<td>
Up
Down
</td>
</tr>
<tr>
<td>Five</td>
<td>
Up
Down
</td>
</tr>
</table>
Demo - JsFiddle
$(document).ready(function () {
$(".up,.down").click(function () {
var $element = this;
var row = $($element).parents("tr:first");
if($(this).is('.up')){
row.insertBefore(row.prev());
}
else{
row.insertAfter(row.next());
}
});
});
Try using JSFiddle