How to get the data from a row jQuery

Question

I have this problem about retrieving row data in jQuery. this is not really a simple problem for me since my table cells contains a select tag, and a input box. To be clear enough, here's my html code of my table:

    <tr>
        <td>
          <select style="width:5em;" class="field">
            <option></option>
            <option>name</option>
            <option>age</option>
            <option>sex</option>
          </select>
        </td> 
        <td>
          <select style="width:5em;" class = "comp">
            <option></option>
            <option>equals</option>
            <option>starts with</option>
            <option>not equal to</option>
          </select>
        </td>
        <td><input type="text" class = 'value'></td>
    </tr>
    <tr>
        <td>
          <select style="width:5em;" class="field">
            <option></option>
            <option>name</option>
            <option>age</option>
            <option>sex</option>
          </select>
        </td>
        <td>
          <select style="width:5em;" class = "comp">
            <option></option>
            <option>equals</option>
            <option>starts with</option>
            <option>not equal to</option>
          </select>
        </td>
        <td><input type="text" class = 'value'></td>
    </tr>  
    <tr>
        <td>
          <select style="width:5em;" class="field">
            <option></option>
            <option>name</option>
            <option>age</option>
            <option>sex</option>
          </select>
        </td>
        <td>
          <select style="width:5em;" class = "comp">
            <option></option>
            <option>equals</option>
            <option>starts with</option>
            <option>not equal to</option>
          </select>
        </td>
        <td><input type="text" class = 'value'></td>
    </tr>              
</table>
<input type="button" value = "go" id="out">

Here's my Javascript code:

$('#out').click(function(){    
    var tr = 1;
    $('table tr').each(function(){
        var td = 1;
        $(this).find('td').each(function(){
            alert(JSON.stringify($(this).text()));
            td++;
        });
        tr++;
    });
})

What I am trying to do is that i want to get all the row data in the table, but everytime I click the button, it won't display the correct output. I also tried this:

$(this).children($(".field option:selected").text())

to get the value of selected option, but it still no good.

DEMO here. Please help....

Answer 1

Does this help you?

http://jsfiddle.net/KzXjb/3/

$('#out').click(function(){   

    var data = new Array();

    $("table select, table input").each(function(){
       data.push($(this).val());
    });

    alert(data.toString());

})