jQuery如何从一行中获取数据答案

【问题标题】：How to get the data from a row jQueryjQuery如何从一行中获取数据
【发布时间】：2011-08-17 12:50:04
【问题描述】：

我有这个关于在 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())

获取所选选项的值，但还是不行。

DEMO 在这里。请帮忙....

【问题讨论】：

.text 只是获取单元格的文本内容，而不是字段的内容
如果您在 JS 中需要它，您是否需要逐行获取过滤器数据？我可以帮助您:)
@Marwan，是的，我需要得到过滤器.. 谢谢你的回复

标签： javascript jquery html-table data-retrieval

【解决方案1】：

这就是我认为你的意思

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++;
        });
    })

【讨论】：

您好，谢谢您的回答。还有一个问题。我想添加一些条件，例如，如果第一个数据是名称，我想提醒其他东西（不是“名称”这个词）。我将如何做到这一点？谢谢。

【解决方案2】：

这对你有帮助吗？

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

})

【讨论】：

谢谢您的回答先生。它还为我提供了一些关于如何执行我的程序的好选择。多谢。 :)

【解决方案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);
    });
})

如果我正确理解你需要什么^^

【讨论】：

是的...这正是我所需要的。非常感谢......我的程序现在完美运行......
是不是和我发的$(this).find('select, input').val();不一样？
是的，不一样。你的回答也很棒。以下所有答案都运行完美。谢谢大家