Miguel Miguel - 1 year ago 51
HTML Question

getting the table row values with jquery

Hi guys I have a simple problem im trying to get the values from an html table row. son 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 http://jsbin.com/ihaqe6 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;' >

<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>

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/>';


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


Answer Source

Try this:

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

    var values = "";

    jQuery.each($columns, function(i, item) {
        values = values + 'td' + (i + 1) + ':' + item.innerHTML + '<br/>';


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download