Getting the table row values with jQuery

Question

I am trying to get the values from an HTML table row. When I click on the table row delete button, I want to put those values on variables to send to the server. I have found something from here that looks like what I need, but when I put it together for my scenario, it does not work.

Here is the table HTML:

  <table id='thisTable' class='disptable' style='margin-left:auto;margin-right:auto;'  >
    <tr>

   <th>Fund</th>
   <th>Organization</th>
   <th>Access</th>
   <th>Delete</th>
   </tr>
    <tr>
   <td class='fund'>100000</td><td class='org'>10110</td><td>OWNED</td><td><a  class='delbtn'ref='#'>X</a></td></tr>
   <tr><td class='fund'>100000</td><td class='org'>67130</td><td>OWNED</td><td><a class='delbtn' href='#'>X</a></td></tr>
   <tr><td class='fund'>170252</td><td class='org'>67130</td><td>OWNED</td><td><a class='delbtn' href='#'>X</a></td></tr>
   <tr><td class='fund'>100000</td><td class='org'>67150</td><td>PENDING ACCESS</td><td><a  class='delbtn' href='#'>X</a></td></tr>
   <tr><td class='fund'>100000</td><td class='org'>67120</td><td>PENDING ACCESS</td><td><a class='delbtn' href='#'>X</a>
   </td>
  </tr>

and here is the jQuery:

  var tr = $('#thisTable').find('tr');
        tr.bind('click', function(event) {
            //var values = '';
           // tr.removeClass('row-highlight');
            var tds = $(this).addClass('row-highlight').find('td');
            
            $.each(tds, function(index, item) {
                values = values + 'td' + (index + 1) + ':' + item.innerHTML + '<br/>';
                alert(values);
            });
            alert(values);

        });

What am I doing wrong? I keep looking at examples but I cant seem to make this work.

And what do you expect the output to be, from that HTML sample? — David Thomas, Jun 26 '12 at 18:07
i expected the values from the row clicked to be alerted conctatenated. atleast to start. — Miguel, Jun 26 '12 at 18:12

score 22 · Accepted Answer · edited Apr 02 '21 at 18:09

22

Try this:

jQuery('.delbtn').on('click', function() {
    var $row = jQuery(this).closest('tr');
    var $columns = $row.find('td');

    $columns.addClass('row-highlight');
    var values = "";
    
    jQuery.each($columns, function(i, item) {
        values = values + 'td' + (i + 1) + ':' + item.innerHTML + '<br/>';
        alert(values);
    });
    console.log(values);
});

DEMO

edited Apr 02 '21 at 18:09

Syscall

19,327
10
37
52

answered Jun 26 '12 at 18:14

Ricardo Alvaro Lohmann

26,031
7
82
82

Thanks ricardo. I'm must appreciative for this answer. I was racking my brain for hours. – Miguel Jun 26 '12 at 18:23
must people use $ instead of jQuery – tibi Jul 12 '17 at 21:45

score 7 · Answer 2 · edited Apr 02 '21 at 18:09

7

Give something like this a try:

$(document).ready(function(){
    $("#thisTable tr").click(function(){
        $(this).find("td").each(function(){
            alert($(this).html());
        });
    });
});

Here is a fiddle of the code in action: https://jsfiddle.net/YhZsW/

edited Apr 02 '21 at 18:09

Syscall

19,327
10
37
52

answered Jun 26 '12 at 18:11

Andrew Odri

8,868
5
46
55

I only want the function to give me the value of the clicked row not the entire table. this is where im getting stuck. – Miguel Jun 26 '12 at 18:13
Hi, the fiddle and code has been updated :) I just changed "each" to "click" – Andrew Odri Jun 26 '12 at 18:50

score 0 · Answer 3 · edited Apr 02 '21 at 18:09

Here is a working example. I changed the code to output to a div instead of an alert box. Your issue was item.innerHTML I believe. I use the jQuery html function instead and that seemed to resolve the issue.

<table id='thisTable' class='disptable' style='margin-left:auto;margin-right:auto;'  >
    <tr>

   <th>Fund</th>
   <th>Organization</th>
   <th>Access</th>
   <th>Delete</th>
   </tr>
    <tr>
   <td class='fund'>100000</td><td class='org'>10110</td><td>OWNED</td><td><a  class='delbtn'ref='#'>X</a></td></tr>
   <tr><td class='fund'>100000</td><td class='org'>67130</td><td>OWNED</td><td><a class='delbtn' href='#'>X</a></td></tr>
   <tr><td class='fund'>170252</td><td class='org'>67130</td><td>OWNED</td><td><a class='delbtn' href='#'>X</a></td></tr>
   <tr><td class='fund'>100000</td><td class='org'>67150</td><td>PENDING ACCESS</td><td><a  class='delbtn' href='#'>X</a></td></tr>
   <tr><td class='fund'>100000</td><td class='org'>67120</td><td>PENDING ACCESS</td><td><a class='delbtn' href='#'>X</a>
   </td>
  </tr>
</table>
<div id="output"></div>

the javascript:

$('#thisTable tr').on('click', function(event) {    
    var tds = $(this).addClass('row-highlight').find('td');
    var values = '';
    tds.each(function(index, item) {           
        values = values + 'td' + (index + 1) + ':' + $(item).html() + '<br/>';
    });
    $("#output").html(values);
});

sorry Jhon your solution did not work for me? im not sure why. I changed $("#output").html(values); to alert(values) and it does not do anything. Ricardo solution seems to do it thought. — Miguel, Jun 26 '12 at 18:22

score 0 · Answer 4 · answered Mar 17 '14 at 05:58

0

All Elements

$('#tabla > tbody  > tr').each(function() {
    $(this).find("td:gt(0)").each(function(){
       alert($(this).html());
       });
});

answered Mar 17 '14 at 05:58

Andres Mauricio

11
4

score -1 · Answer 5 · edited Sep 20 '16 at 10:09

$(document).ready(function () {
        $("#tbl_Customer tbody tr .companyname").click(function () {

            var comapnyname = $(this).closest(".trclass").find(".companyname").text();
            var CompanyAddress = $(this).closest(".trclass").find(".CompanyAddress").text();
            var CompanyEmail = $(this).closest(".trclass").find(".CompanyEmail").text();
            var CompanyContactNumber = $(this).closest(".trclass").find(".CompanyContactNumber").text();
            var CompanyContactPerson = $(this).closest(".trclass").find(".CompanyContactPerson").text();
           // var clickedCell = $(this);
            alert(comapnyname);
            alert(CompanyAddress);
            alert(CompanyEmail);
            alert(CompanyContactNumber);
            alert(CompanyContactPerson);

            //alert(clickedCell.text());
        });
    });

.companyname cell click part. .trclass means tr class name .In find double quotation is each td class name ...It is working fine — Rajenthiran T, Sep 20 '16 at 09:35

Getting the table row values with jQuery

5 Answers5

Linked