Get specific row from table using jQuery

Question

I am trying to retrieve data from specific rows in a table based on check box selection done by the user.

For this, I have found two methods eq(rowIndex) and nth-child(rowIndex). However,it works only when given an absolute values and not when its dynamic.

Have tried the following but no luck on this:

function getData()
 {
    var chkArr = document.getElementsByName('checkbox');
    var checkedRecord = 0;
    for(var i=0; i<chkArr.length; i++)
    {   
    if(chkArr[i].checked)
    {
              checkedRecord = i;
              $('#summaryTable > tbody  > tr').eq('#checkedRecord').children('td').each(function(j)
            //checkedRecord is the row index here
             {
             //fetch values from td
             }); 
          }
      }  
 }

Here's how my html looks

<table>
<tr>
    <td><input type="text" id="text1"></td>
    <td>
        <select>
            <option value="opt1">Orange</option>
            <option value="opt2">Green</option>
        </select>
    </td>
</tr>
<tr>..</tr>

Any suggestions on this?

can you please provide an example with also the table code? www.jsfiddle.net — BeNdErR
– BeNdErR, Commented Sep 5, 2013 at 12:51
Can you post your HTML so we can see what and where '#checkedRecord' is. — Rory McCrossan
– Rory McCrossan, Commented Sep 5, 2013 at 12:51

Barmar · Accepted Answer · 2013-09-05 12:59:21Z

1

You want something like this:

$('#summaryTable > tbody  >  tr').eq(i).children('td')
    .each(function() { ... });

The argument to eq must be a number.

There's also no need for the checkedRecord variable, it's the same as i.

answered Sep 5, 2013 at 12:59

Barmar

789k57 gold badges555 silver badges669 bronze badges

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

1 Comment

Barmar Over a year ago

Can you make a fiddle that demonstrates the problem?

Habibillah · Accepted Answer · 2013-09-05 13:29:35Z

1

eq method need integer value as parameter, but you pass a selector syntax to this method. Look at your code at line:

$('#summaryTable > tbody  > tr').eq('#checkedRecord')....

You have define checkedRecord variable above as var checkedRecord = 0;. So you need to modify that line to become:

$('#summaryTable > tbody  > tr').eq(checkedRecord)....

answered Sep 5, 2013 at 13:29

Habibillah

28.8k5 gold badges40 silver badges59 bronze badges

Comments

Manish Sharma · Accepted Answer · 2013-09-05 13:02:46Z

0

try this,

var gridRows = $("#myTable tbody tr");
var qnt = gridRows[i].cells[2].childNodes[0].value;

and if you want all rows data so use this function

function GridCount() {
        var grid = $("#myTable tbody");
        var gridRows = $("#myTable tbody tr");
        var gridfootRows = $("#myTable tfoot tr");
        var subTotal = 0;
        var Id;
        var Name;
        for (var i = 0; i < gridRows.length; i++) {
            if (isFireFox()) {
                Id = gridRows[i].cells[0].childNodes[0].innerHTML;
                Name = gridRows[i].cells[1].childNodes[0].innerHTML;
            }
            else {
                Id = gridRows[i].cells[0].innerText;
                Name = gridRows[i].cells[0].innerText;
            }
            var qnt = gridRows[i].cells[2].childNodes[0].value;
            var price = gridRows[i].cells[3].childNodes[0].value;
            var total = parseFloat(price * qnt).toFixed(2);
            gridRows[i].cells[4].childNodes[0].innerHTML = total;
            subTotal = parseFloat(subTotal) + parseFloat(total);
        }

}
function isFireFox() {
   return navigator.appName == "Netscape";
}

answered Sep 5, 2013 at 13:02

Manish Sharma

2,4562 gold badges18 silver badges33 bronze badges

3 Comments

colestrode Over a year ago

why the mix of jquery and plain javascript?

Manish Sharma Over a year ago

problem in browser comparability so i am using this.

colestrode Over a year ago

jQuery handles browser compatibility for you

colestrode · Accepted Answer · 2013-09-05 14:00:05Z

0

I'm not exactly sure what you are asking for, but it seems you want to find the values of selects found in rows that correspond by index to checked checkboxes. This will allow you do do that:

function getData() {
    var rows = $('#summaryTable > tbody  > tr'), //cache rows for performance
        values = []; //array of values to return

    //iterate through all checkboxes
    $('input[type=checkbox]').each(function (i) { 
        if(this.checked) {
            //if checkbox is checked, find select and get value, then add to values array
            values.push(rows.eq(i).find('select').val()); 
        }
    });

    return values;
}

answered Sep 5, 2013 at 14:00

colestrode

10.7k3 gold badges32 silver badges43 bronze badges

Collectives™ on Stack Overflow

Get specific row from table using jQuery

4 Answers 4

1 Comment

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related