Develop Reference

How to find adjacent td of a speicifc column of a table

I am trying to control a specific column of a table using jQuery.
I would like to select the next or the previous td contained in the column number 5 starting, for istance, from the second one and change the related text or css properties of the adjecent ones.
$(document).ready(function() {
$('table.pl_res_game tr td:nth-child(5)').eq(0).addClass('change');
The column can contains 3 or more than 100 td. I tried to use the method next() and previous
$('table.pl_res_game tr td:nth-child(5)').eq(0).next();
but I could not select the adjacent ones.
This is the example:
FIDDLE

I would like to select all td contained in the column number 5
In this case you just need to remove eq(0) from your current code, as that is restricting the selection to the first td found:
$('table.pl_res_game tr td:nth-child(5)').addClass('change');
Example fiddle
I would like to select the next or the previous td
In this case use prev() and next() to find it:
var $td = $('table.pl_res_game tr td:eq(1)');
$td.next().add($td.prev()).addClass('direct-sibling');
Example fiddle

to select elements form next row
$('table.pl_res_game tr td:nth-child(5)').eq(0).closest('tr')
.next()
.find('td:nth-child(5)').css({'background-color':'green','color':'#fff'});
FIDDLE
jsut use prev to select previous td of same row
$('table.pl_res_game tr td:nth-child(5)').prev()
.eq(0)
.css({'background-color':'green','color':'#fff'});
FIDDLE

try modifing the index of the eq() like in the sample below:
$('table.pl_res_game tr td:nth-child(5)').eq(1).css({'background-color':'green','color':'#fff'});
$('table.pl_res_game tr td:nth-child(5)').eq(2).css({'background-color':'green','color':'#fff'});
and so on
You can then use a for loop for the range you want to select:
$(document).ready(function() {
for (var i=0;i<3;i++){
$('table.pl_res_game tr td:nth-child(5)').eq(i).css({'background-color':'green','color':'#fff'});
}
});
JSFIDDLE

table row toggle by clicking td

Please check the fiddle link
http://jsfiddle.net/mv7Y5/89/
am trying to achieve to toggle the table row by clicking the td,
which is not happening please help needed.
$(function() {
$(".details").hide();
$('.show-details').click(function(e) {
$(this).next("tr").slideToggle(500);
});
});

You are calling next() on the td that gets clicked (on the first cell, anyway). What next() does is it finds the nearest sibling of the element in question that matches the selector. There is no tr that is a sibling of the td that gets clicked. You need to make sure that you're calling next() on the tr, so it can find the next tr:
$(function() {
$(".details").hide();
$('td.show-details').click(function(e) {
$(this).parent().next("tr").slideToggle(500);
});
});
Additionally, your markup in that jsfiddle is a little screwy (you've got an inconsistent number of columns in your rows, for example, which I believe may be the result of some typos.)

In your first row, you have the class name "show-details" on the "td". On the subsequent rows, the class name is on the "tr" elements. Since you are using ".next()" to find a "tr", the class should be on the "tr" as in the second, third and forth rows.

<tr class='rowToClick'><td>click me</td></tr>
Next, this should work:
$(document).ready(function()
{
$(".rowToClick").click(function() { $(this).nextUntil(".rowToClick").toggle(); });
});

Enable and add CSS Class for all the input elements inside a HTML table

I have a table with input type="text" elements in some of the TDs and the table have multiple rows (not more than 5) with the same structure.
Is there a way to enable and add some CSS classes to all the input elements in the table using jQuery or JavaScript?

Simply
$("table input").addClass("yourClassName");
will do the trick. All input fields that comes under table tag will now have a class "yourClassName"

$("table input").attr('disabled','disabled').addClass('classes');

Try this
$('table tr td').find('input:text').each(function(){
$(this).prop('disabled',false); // this line enable the text box
$(this).addClass('urclass'); // this line add the class to text box
});
OR
$('table tr td').find('input:text').prop('disabled',false).addClass('urclass');

Do this way :
$('table').find('input:text').prop('disabled',false).addClass('urclass');

$('table td input:text').addClass('yourClass').prop('disabled', true);

jQuery - Get table row count with a certain class

I know I can get the number of rows in an HTML table with the following jQuery:
var rows= $('#myTable tbody tr').length;
However, how can I get the number of rows that have a given class (e.g., <tr class="MyClass>). How can I count the number of rows in a table with a class of "MyClass"?

Simply add the class to the selector
var rows= $('#myTable tbody tr.MyClass').length;

No need to overqualify so this would work too
var rows= $('#myTable tbody .MyClass').length;

As Adam said use .class-name selector.
For further examples see other jquery selectors

Just change your jQuery to check for instances of the class.
var rows = $('.MyClass').length;
Here's a jsfiddle example: http://jsfiddle.net/Ma7pz/

jQuery: select the first five rows of a table

How can I quickly get a jQuery selector for the textboxes in the the first 5 rows of a table? I have a table with many rows and many textboxes; I'm just trying to select the textboxes in the first 5 rows of the table. Is there an easy way to do this?

Use lt()
$('tr:lt(5) input[type=text]')
Note that it's lt(5), not lt(6), since the indexes are 0-based.

try:
$("#yourTable tr:lt(5) input[type=text]")

see "http://docs.jquery.com/Selectors/nthChild#index"
try width:
$("table tbody tr:nth-child(0)").html();
$("table tbody tr:nth-child(1)").html();
$("table tbody tr:nth-child(2)").html();
$("table tbody tr:nth-child(3)").html();
$("table tbody tr:nth-child(4)").html();