2

I have a table that looks something like this, where most of the rows are not displayed:

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

I am trying to access all of the visible rows in the table, and concatenate each cells' value to a string that will be output into CSV. I have some jQuery code but it doesn't get very far at the moment:

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

The line $("#myTable tr:visible td").each(function () { is failing. Any help here? I'm a bit of an amateur at writing this type of code. I want this code to select all tr elements that are not set to display: none and then for each of these, select and access all td elements.

2
  • When you say the line is failing, what do you mean? Are you getting a JS error? Or is it simply not running for anything?
    – Jacob
    Sep 16, 2013 at 23:25
  • @Jacob When I step into the line, it skips to the $.get at the end and doesn't even make it to the if statement. Sep 16, 2013 at 23:32

2 Answers 2

1

.has() method returns a jQuery object and an object is a truthy value in JavaScript, has unlike hasClass method doesn't return a boolean value, it's a filtering method, you should use length property instead:

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

If you want to exclude td elements that have a descendants, you can use .not() method:

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

In case that you want to create a comma-seprated-values string, you can use .map() method:

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

jsFiddle Demo

The issue you are having is that hasjQuery API will return a collection. In order to get a truthy value out of it, you should check the length property.

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

Otherwise, everything else works just fine.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.