jquery - get the value of <tr> in a html table - javascript

I have a AJAX created table.
And I need to call a ajax request on the those table which was created through ajax.
Through this I figured out to call the click function on dynamically created HTML element.
Table looks similar like this.
<table>
<thead>
<th>Sr. No</th>
<th>Label</th>
</thead>
<tbody>
<tr value="1">
<td>1.</td>
<td>One</td>
</tr>
<tr value="2">
<td>2.</td>
<td>Two</td>
</tr>
</tbody>
</table>
I've assigned value to the tr and now I want to create another ajax request on click of the tr. And based on the value I'm running a query to get the data.
Challenge I'm facing is that I'm not able to get the value of the tr.
Here's the code I tried with.
$(document).ready(function() {
$('.table').on('click', 'table tbody tr', function() {
alert($(this).val())
})
})
Here's the fiddle.
Even in the fiddle I'm unable to get the value of a tr.
Please help me to find where I'm going wrong.
Thanks in advance.

You can use .attr() instead:
$(document).ready(function() {
$('.table').on('click', 'table tbody tr', function() {
alert($(this).attr('value'))
})
})
Updated Fiddle
but actually you should use data-* HTML5 attribute:
<tr data-value="1">
then retrieve it using .data():
$(document).ready(function() {
$('.table').on('click', 'table tbody tr', function() {
alert($(this).data('value'))
})
})
Updated Fiddle

$(document).ready(function() {
$('.table').on('click', 'table tbody tr', function() {
alert($(this).attr("value"));
})
})
see http://jsfiddle.net/tqQm5/4/

Use text() property of tr instated of val() property.
see this Fiddle
see this code
$(document).ready(function() {
$('.table').on('click', 'table tbody tr', function() {
alert($(this).text())
})
})

Try this use.attr()
alert($(this).attr("value"));

Related

How to hide all tr from table except clicked one

I want to hide all <tr> of the table except on which I clicked.
<table>
<tr>
<td>ABC</td>
<td>DEF</td>
<td><i class="delete">delete </i></td>
</tr>
<tr>
<td>ABC</td>
<td>DEF</td>
<td><i class="delete">delete </i></td>
</tr>
</table>
On click of delete button hide all rows except current.
Jquery code:-
$(document).ready(function () {
$('table tbody tr').siblings().not($(this)).hide();
});
Please suggest me.
Use siblings as follow:
See the comments inline in code:
// Bind click event on `tr` inside `table`
$('table').on('click', 'tr', function () {
// Show current `tr` and hide others
$(this).siblings().hide();
});
Demo: http://jsfiddle.net/tusharj/LL0c2efg/
You need to run your code under a click event handler, not when the page loads. Also note that .not(this) is redundant when using siblings() as the originating element would not be included anyway. Try this:
$(document).ready(function() {
$('table tbody tr').click(function() {
$(this).siblings().hide();
});
});
Example fiddle
$(document).ready(function () {
$('table tbody tr').click(function(){
$('table tbody tr').hide();
$(this).show();
})
});
DEMO

HTML: Background color using jquery?

HTML:
<table border="1"style="width:500px" id="table2">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>grades</th>
</tr>
<tr>
<td>riddhi</td>
<td>bhatt</td>
<td>50</td>
</tr>
<tr>
<td>sneh</td>
<td>pandya</td>
<td>55</td>
</tr>
<tr>
<td>ankit</td>
<td>purani</td>
<td>60</td>
</tr>
</table>
I want to add a background color in odd rows of table.
JQuery:
$(document).ready(function(){
$("#table2 > tr:odd").css("background-color","blue");
});
I am new in HTML and jQuery, please suggest me so that I can proceed...
Use this ,
$(document).ready(function(){
$("#table2 tr:odd").css("background-color","blue");
});
Demo Fiddle
> won't work here - Reference
The table hierarcy is table > tbody > tr > td, so in that case, try this,
$("#table2 > tbody > tr:odd").css("background-color","blue");
Demo
As others said,
$("#table2 tr:odd")
will select ALL of the odd tr's inside table2, it'll work for a simple table. But if you want to for example put a table inside table2, it will select the trs of the second table too, because they're also inside table2
if you want to select only the tr's from table2, but not the ones of a table inside table2, you would use
$("#table2>tbody>tr:odd")
which selects only the direct tr children of the direct tbody children of table2
Try this
$("#table2 tr:odd").css("background-color","blue");
DEMO
tbody, thead and tfoot is rendered by html so you need to use #table2 > tbody > tr:odd,#table2 > thead > tr:odd,#table2 > tfoot > tr:odd as a selector to make it work but you have no sense to use odd here. So simple if you just remove > then it will be fine:
$("#table2 tr:odd").css("background-color","blue");
IF none of the above working means please try to Change $ to jQuery, it will be work...
It works fine:
http://jsbin.com/caxahube/1/edit
$(document).ready(function(){
$('table>tbody>tr:odd').css('background-color', 'blue');
});

Making table row clickable in jsp

I am having table rows and I want to make the whole row clickable.So to do it I right the following ajax code :
$(document).ready(function() {
$('#myrow').click(function ()
{
//alert("hi");
$.ajax({
type: "post",
url: "shownotification.jsp",
data: {
notifyidd: $('#notifyidd').val(),
notifyuser: $('#notifyuser').val()
},
success: function(msg){
//if(msg == "success")
alert('Data updated.');
window.location.reload();
}
});
});
});
But the problem is that it just make my first row clickable, and all other are still not.
What can be the reason? Please help.
Seem like currently you're having duplicated id for your tr, try to apply class instead:
<tr class="myrow" ......
then you can use . to target elements by class:
$(document).ready(function() {
$('.myrow').click(function () {
// Your code here
});
});
bind you code with on and also done with previous code
HTML
<table>
<tbody>
<tr class="myrow">.......
</tr>
</tbody>
</table>
jQuery
you can try two method
$(document).ready(function() {
$('.myrow').click(function ()
{
//your stuff
});
/***or can try this below method**/
$('table').on('click', 'tr', function() {
//your stuff
});
});
Try this
$(document).on('click', '#table-id tr', function() {
alert('Hello');
});
In Your Code you are giving click event on id
i.e. $('#myrow').click(function ()
So it is no working because id of div must be unique. change your rows id with class name then it will work fine
$('.myrow').click(function ()
Refer below link for reference
Demo Link
Table HTML is
<table style="width:300px">
<tr class="tableRow">
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr class="tableRow">
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr class="tableRow">
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
Script for click event
$(".tableRow").click(function(e){
alert("Table Tr Clicked");
});

change the tr field in a jquery

I'm trying to change a yes to a select dropdown that allow user to select yes or no.
the html is like that:
<tr>
<td> text </td>
<td>no(must be changed by js)</td>
<td>My button</td>
</tr>
<tr>
<td> text </td>
<td>yes(must be changed by js)</td>
<td>My button</td>
</tr>
...
$('a[href="#"]').click(function() {...} });
I want to change the content of the "yes" just before the button to a dropdown list AND the value of the href of the button clicked to do some treatment in back.
I tried this but it doesn't work after the alert... :
<script type="text/javascript">
//to make the authority editable
$('a[href="#"]').click(function() {
var select = this.parentElement.parentElement;
alert(select);
select: nth - child(2).apped("hello");
});
</script>
Thanks to help me :-)
You can use .parent() and .prev() traversal methods
$('a[href="#"]').click(function() {
$(this).parent().prev().html('xxx')
});
Demo: Fiddle
If you want to use :nth-child, you need to find the tr of the clicked button then use .find()
jQuery(function () {
$('a[href="#"]').click(function () {
$(this).closest('tr').find(':nth-child(2)').html('xxx')
});
})
Demo: Fiddle
If you only have two tr in your table like above HTML markup, You can use .eq() like this:
$('a[href="#"]').click(function() {
var select = this.parentElement.parentElement;
alert(select);
$('tr:eq(1) td:eq(1)').append("hello");
});
Also, you're probably looking for .text() instead of .append() to change the text inside your td:
$('tr:eq(1) td:eq(1)').text("hello");

Jquery select td value from inside another td

i've looked in the manual to search for the next value in a table but the problem is that i'm in the first span cell 'cause of the event catch by :
jQuery code:
$('span[name="checkSeleccion"]').live('click',function(){
alert($(this).attr('id')+"::"+$(this).next('td').html());
});
HTML code:
<tbody>
<tr>
<td>
<span id="606" class="checkboxClear" rel="606-null-335" name="checkSeleccion"> </span>
</td>
<td style="padding-top:6px;">http://www.hithere.com</td>
<td align="center" style="padding-top:6px;">335</td>
</tr>
</tobdy>
is there a way to catch the second td value when the span is clicked?
Thanks.
Change this:
$(this).next('td')
to this:
$(this).parent('td').next('td')
You forgot to use .parent():
$('span[name="checkSeleccion"]').live('click', function() {
alert(this.id + "::" + $(this).parent().next('td').html());
});
Also note that $(this).attr('id') could be written as just this.id, which is much more efficient (and easier to type!).
add the .parent() selector:
alert($(this).attr('id')+"::"+$(this).parent().next('td').html()); });

Categories