jQuery 获取可见表格单元格的值

Question

我有一个看起来像这样的表格，其中大部分行都没有显示:

<table id="myTable" class="tablesorter">
    <thead>
        <tr>
            <th>header1</th>
            <th>header2</th>
            ...
        </tr>
    </thead>
    <tbody>
        <tr style="display:none;">
            <td>content1</td>
            <td>content2</td>
            ...
        </tr>
        <tr style="display:none;">
            <td>content1</td>
            <td>content2</td>
            ...
        </tr>
        <tr>
            <td>content1</td>
            <td>content2</td>
            ...
        </tr>
        ...
    </tbody>
</table>

我正在尝试访问表中的所有可见行，并将每个单元格的值连接到将输出到 CSV 中的字符串。我有一些 jQuery 代码，但目前还没有走多远:

<input type="button" value="Export" id="csv-export" />

<script type="text/javascript">
    $(function () {
        $("#csv-export").click(function () {
            var csvStr = "";
            $("#myTable tr:visible td").each(function () {   //for each td in each visible row
                if ($(this).has("a") == false) {   //if the td does not contain a link
                    csvStr += $(this).html();   //Append the td's html
                }
            });
            $.get('@Url.Action("CSVExport")', { csv: csvStr });
        });
    });
</script>

行 $("#myTable tr:visible td").each(function () { 失败。这里有什么帮助吗？我对编写这种类型有点业余代码。我希望此代码选择所有未设置为 display: none 的 tr 元素，然后对于每个元素，选择并访问所有 td 元素。

Answer 1

.has() 方法返回一个 jQuery 对象，并且该对象在 JavaScript 中是一个真值，has 与 hasClass 方法不同，它不是返回一个 bool 值，这是一个过滤方法，你应该使用 length 属性代替:

if (!$(this).find("a").length) { 

如果要排除具有 a 后代的 td 元素，可以使用 .not() 方法:

$("#myTable tr:visible td").not(":has(a)").each(function () {

如果您想创建逗号分隔值字符串，可以使用 .map() 方法:

var csvString = $("#myTable tr:visible td").not(":has(a)").map(function() {
     return $.trim( $(this).text() );
}).get().join();