Select multiple rows from html table and send values to a function in javascript

Question

I have an HTML table where I need to select multiple rows and send first cell value of each row to a function. I tried the follwing code. This selects only one row and sends only one value to the function. If I select multiple rows only the first value selected is entering the function. How do I solve this issue?

test.html

<table id="table">
        <tr>
            <td>1 Ferrari F138</td>
            <td>1 000€</td>
            <td>1 200€</td>

        </tr>
        <tr>
            <td>2 Ferrari F138</td>
            <td>1 000€</td>
            <td>1 200€</td>

        </tr>
        <tr>
            <td>3 Ferrari F138</td>
            <td>1 000€</td>
            <td>1 200€</td>

        </tr>
    </table>
    <input type="button" class="ok" id="tst" value="OK" onclick="" />

test.js

$("#table tr").click(function(){
   $(this).addClass('selected').siblings().removeClass('selected');    
   var value=$(this).find('td:first').html();
   alert(value);    
});

$('.ok').on('click', function(e){
   var selectedID=$("#table tr.selected td:first").html();
   fnMatchID(selectedID);

});

function fnMatchID(selectID){
//some code here
}

DEMO :::: JSFiddle

I need to select multiple rows and send all the first cell values of the selected rows to a function.

Thorbjørn Kappel Hansen · Accepted Answer · 2014-07-17 06:42:20Z

Depending on whether you want to call the function multiple times or send the data along as an array, there are two things you can do.

Either way, don't removeClass on .siblings(), if you want to be able to select multiple rows. You might also consider using .toggleClass("selected") instead of .addClass("selected"), if you want to be able to unselect rows.

Solution 1: Send data as array of strings

$("#table tr").click(function(){
   $(this).addClass('selected');    
   var value=$(this).find('td:first').html();
   alert(value);    
});

$('.ok').on('click', function(e){
   var selectedIDs = [];
   $("#table tr.selected").each(function(index, row) {
      selectedIDs.push($(row).find("td:first").html());
   });


   fnMatchID(selectedIDs);

});

Solution 2: Call function repeatedly

$("#table tr").click(function(){
   $(this).addClass('selected');    
   var value=$(this).find('td:first').html();
   alert(value);    
});

$('.ok').on('click', function(e){
   $("#table tr.selected").each(function(index, row) {
      fnMatchID($(row).find("td:first").html());
   });
});

Either way, what you're probably looking for is the .each function: http://api.jquery.com/each/

code-jaff · Accepted Answer · 2014-07-17 07:31:33Z

4

simple solution would be like this,

$("#table tr").click(function(){
   $(this).toggleClass('selected');
});

$('.ok').on('click', function(e){
    var selected = [];
    $("#table tr.selected").each(function(){
        selected.push($('td:first', this).html());
    });
    alert(selected);
});

UPDATED FIDDLE

answered Jul 17, 2014 at 7:31

code-jaff

9,3284 gold badges38 silver badges56 bronze badges

Collectives™ on Stack Overflow

Select multiple rows from html table and send values to a function in javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related