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 () {失败。这里有什么帮助？我在撰写这类代码时有点像业余爱好者。我希望此代码选择未设置为tr的所有display: none元素，然后为每个元素选择并访问所有td元素。

Answer 1

.has()方法返回一个jQuery对象，一个对象是JavaScript中的truthy值，has不像hasClass方法不返回布尔值，它是一个过滤方法，你应该改为使用length属性：

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

如果您要排除td后代的a元素，可以使用.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();

Answer 2

的 jsFiddle Demo 的

您遇到的问题是^{jQuery API}会返回一个集合。为了获得它的真实价值，你应该检查长度属性。

if (!$(this).has("a").length) { csvStr += $(this).html(); }

否则，其他一切工作正常。

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

2 个答案: