Skip to content

How to get the current row selected in a HTML5 table in JQuery

December 4, 2014

If you have a table called #tblSummary with lots of rows and columns, you can grab hold of the row clicked if you have a a link or button within that row using JQuery by using the event handler $(‘#tblSummary’).find(‘tr’).click(function())

If you call $(this), you are able to get hold of the selected table rowm and be able to drill down to any of the column cells of that row using $(this).find(“td:first”).html() to get the first column cell in HTML format or $(this).find(“td:nth-child(2)”).html() to get the second column cell in HTML format.

See code below for an example.

if ($(“.fieldValue”).val() == “False”) {

$(‘#container-5’).tabs(“select”, 0);
}

if ($(“.fieldValue”).val() == “True”) {
$(‘#container-5’).tabs(“select”, 1);
}

$(‘#tblSummary’).find(‘tr’).click(function () {
var content = $(this).find(“td:nth-child(2)”).html();
if (content.indexOf(“tab1”) >= 0) {
$(‘#tabs’).tabs(“select”, 0);
$(“.fieldValue”).value = “False”;
}
if (content.indexOf(“tab2”) >= 0) {
$(‘#tabs’).tabs(“select”, 1);
$(“.fieldValue”).value = “True”;
}
});

Advertisements

From → Uncategorized

Leave a Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: