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());

})

Answer 2

Here is what I think you meant

http://jsfiddle.net/mplungjan/8xFFH/12/

$('#out').click(function(){    
        var tr = 1;
        $('table tr').each(function(){
            var td = 1;
            $(this).find('td').each(function(){
                var fld = $(this).find('select, input');
                alert(fld.val());
                td++;
            });
            tr++;
        });
    })

Answer 3

You can try something like this :

$('#out').click(function(){    
    $('table tr').each(function(){
        var td = '';
        $(this).find('option:selected').each(function(){
           td = td + ' ' + $(this).text();
        });
        td = td + ' ' + $(this).find('input').val();
        alert(td);
    });
})

If i correctly understand what you need ^^