Как получить данные из строки jQuery

Question

У меня проблема с получением данных строки в jQuery. для меня это не простая проблема, так как ячейки моей таблицы содержат тег select и поле ввода. Чтобы быть достаточно ясным, вот мой HTML-код моей таблицы:

    <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">

Вот мой код Javascript:

$('#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++;
    });
})

Что я пытаюсь сделать, так это то, что я хочу получить все данные строк в таблице, но каждый раз, когда я нажимаю кнопку, она не будет отображать правильный вывод. Я также попробовал это:

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

, чтобы получить значение выбранной опции, но это все равно бесполезно.

ДЕМО здесь. Пожалуйста, помогите ....

Answer 1

Вам это помогает?

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

Вот то, что я думаю, вы имели в виду

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

Вы можете попробовать что-то вроде этого:

$('#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);
    });
})

Если я правильно понимаю, что вам нужно ^^