Assigned variable to function(each statement in jQuery) not having values

Question

I am trying to use this jQuery dropdown filter plugin from GitHub https://github.com/rbayliss/Dropdown-Table-Filter . In my case, the table format is like this:

<table id="table_2">
    <thead>
    <tr>
      <th> Items </th>
      <th> Quantity </th>
    </tr>
    </thead>
    <tbody>
    <tr>
     <td> Apple </td>
     <td> 20 </td>
    </tr>
    <tr>
     <td> Orange </td>
     <td> 20 </td>
    </tr>
    </tbody>
</table>

So, re-modelling the plugin to suit this case was necessary:

var table = $(this);
    $('thead tr th:visible', table).each(function(index) {
         var selectbox = $('<select>');
         var values = [];
         var opts = new Array();
         selectbox.append('<option value="--all--">' + $(this).text() + '</option>');
     for(var noOfTr = 0; noOfTr<2; noOfTr++) {
          var tr = $('tbody tr:eq('+ noOfTr +')',table);
          var col = tr.find('td:eq(' + (index) + ')').each(function(index) {
            var cellVal = escape($.trim($(this).text()));
            if(cellVal.length == 0) {
            cellVal = '--empty--';
          }
          $(this).attr('ddtf-value', cellVal);

          if($.inArray(cellVal, values) === -1) {
            var cellText = $.trim($(this).text());
            if(cellText.length == 0) {cellText = '--Empty--';}
            values.push(cellVal);
            opts.push({val:cellVal, text:cellText});
          }
        });
    }       
}

The variable assigned to the function "col" is not containing any value after the execution whereas the "opts" is getting populated correctly. Please help me out in populating col.

Answer 1

Try to use:

var col = tr.find('td:eq(' + (noOfTr) + ')').each(function(index) {

instead of:

var col = tr.find('td:eq(' + (index) + ')').each(function(index) {

since the auto increment variable is noOfTr not index .