Question

I have a table structure much like this

            <table id="oustandingItems">
            <thead>
                <tr><th>Category</th>
                <th>Details</th>
                <th></th>
            </tr></thead>
            <tbody>
                <tr>
                    <td>
                        <select id="OICategory">
                             <option value="1">Fault</option>
                             <option value="2">Shortage</option>
                             <option value="3">Retorfit</option>
                             <option value="4">Labour</option>
                             <option value="5">Other</option>
                         </select>
                    </td>
                    <td><textarea id="OIDetails" rows="3" cols="62"></textarea></td>
                    <td><button id="addNewRow" class="addbutton">>Add</button></td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td class="detailsCounter textareacounter">185 characters remaining</td>
                    <td>&nbsp;</td>
                </tr>
            <tr>
                <td class="evenrow">Fault</td>
                <td class="evenrow">ghgfhgfhgfhgfh</td>
                <td class="butCell evenrow">
                    <button class="removeitem">Remove</button>
                </td>
            </tr>
            <tr>
                <td class="oddrow">Fault</td>
                <td class="oddrow">cvbcvbcvbcvbcvb</td>
                <td class="butCell oddrow">
                    <button class="removeitem">Remove</button>
                </td>
            </tr>
         </tbody>
        </table>

I am trying to retrieve the datat from the first two td’s of the odd and even rows with this code

$(document).ready(function() {
var tableHeader = $('#oustandingItems');
var tds = $('#oustandingItems td.evenrow, #oustandingItems     td.oddrow').filter(function(index) {
    alert($(this).not('button.removeitem').html());
});
});​

but I am not getting the correct output can anyone suggest a reason why I am getting the Button cell returned as well as the first two cells.

JSFiddle Example

Answer 1

You are using filter method, but actually do not filter the elements, you can use not method:

$(document).ready(function() {
  var $tableHeader = $('#oustandingItems');
  var $tds = $tableHeader.find('td.evenrow, td.oddrow').not('.butCell').each(function(){
      // alert($(this).text())
  })
});

http://jsfiddle.net/8rSLC/

You can use your cached object and find method which is more efficient than re-querying the DOM. Note that using button.removeitem doesn’t filter your td elements.