How to get values from an html table column <td> of a selected row <tr> using javascript

Question

i have an html table that is displayed on my web application, but i would like to select a row by clicking on it and then have a button to get each columns data as variables i can use in javascript. this is what i was trying but it's not complete because i do not know what to do. remember i want what's in the columns. my function...

function selectedRows() 
{
   var selectedItems = ('#ScannedLabelTabl; // i wanted to get the selected item (row)

     $.each(selectedItems, function (i, item) {


      });

}

How do you handle the click on the table? A click handler for every table cell? If so, you can find the index of the clicked cell in its row. — Mr Lister
– Mr Lister, Commented Feb 22, 2013 at 9:30
Is the table dynamic or static? If static, it may be that you can create the data as an object in JavaScript and then use that to write the table but also an easier reference for the event handler... — guypursey
– guypursey, Commented Feb 22, 2013 at 9:35

Ovilia · Accepted Answer · 2013-02-22 09:36:03Z

1

$('tr').click(function() {
    $('tr').removeClass('selected');
    $(this).addClass('selected');

    var td = $(this).children('td');
    for (var i = 0; i < td.length; ++i) {
        alert(i + ': ' + td[i].innerText);
    }
});

Run demo here: http://jsfiddle.net/VjkML/

answered Feb 22, 2013 at 9:36

Ovilia

7,30013 gold badges50 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

turiyag · Accepted Answer · 2013-02-22 09:36:11Z

0

The easiest way I could think of doing this would be to add a class to the row/column when the user clicks the element. CSS styles could apply, and jQuery's class selector could be used to enumerate the selected elements.

I'll build a JSFiddle.

Aww. Too slow. Props to Ovilia.

answered Feb 22, 2013 at 9:36

turiyag

2,9173 gold badges25 silver badges21 bronze badges

Comments

Hugo Alves · Accepted Answer · 2013-02-22 09:44:03Z

0

assuming you want to allow multiple selections (not sure if that's what you want) you may add a click event handler to the cells that do

$("tr").click(eventHandler);

function eventHandler(){
    //what this does is verifies of the element has the class, if it doesn't have the class is addeds, if it has the class it's removed
    $(this).toggleClass("selected");
}

then to get all the values do something like this:

function getAllValues(){
    var arrayOfValues = [];
    $(".selected").each(function(){
        var value = $(this).//what you want to get val or text
        arrayOfValues.push()

    });
    return arrayOfValues;
}

edited Feb 22, 2013 at 9:44

answered Feb 22, 2013 at 9:37

Hugo Alves

1,5552 gold badges20 silver badges41 bronze badges

Comments

user2063626 · Accepted Answer · 2013-02-22 10:01:11Z

0

Try below code

  $(function () {

    $("td").click(function () {
        $("td", $(this).parent()).each(function () {
            alert($(this).html());
        })
    })

answered Feb 22, 2013 at 10:01

user2063626

Comments

Bachas · Accepted Answer · 2017-09-18 06:12:23Z

0

var tableRows = $("#ScannedLabelTabl").find("tr");//fetching all rows of the tblebody
$.each(tableRows, function( index, value ) {//iterating all fetched rows
     var tdValue=$(value).find("td:nth-child(3)").html();   
     (value).find("td:nth-child(3)").addClass("adding");//get particular column

answered Sep 18, 2017 at 6:12

Bachas

2436 silver badges17 bronze badges

Collectives™ on Stack Overflow

How to get values from an html table column <td> of a selected row <tr> using javascript

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related