如何使用jQuery仅将可见的tr表导出到excel

Posted 2023-05-07

【中文标题】如何使用jQuery仅将可见的tr表导出到excel

【英文标题】：How to export only visible tr table to excel with jQuery

【发布时间】：2014-02-09 23:18:59

【问题描述】：

我有一些表格与这个插件https://github.com/btechco/btechco_excelexport 结合将数据导出到excel。然后我用复选框控制表格以显示或隐藏表格的特定列。

但是，我如何才能导出到只有可见 tr 表的 excel？

表格。

<div>
<input type="checkbox" value="blabla" checked="checked">Column 1
<input type="checkbox" value="blabla" checked="checked">Column 2
<input type="checkbox" value="blabla" checked="checked">Column 3
</div>

<button id="btnExport">Export</button>
<table id="tableexport">
  <thead>
    <tr>
      <th>No.</th>
      <th>Name</th>
      <th>Phone</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>1</td>
      <td>John</td>
      <td>123456</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Anne</td>
      <td>987654</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Nikki</td>
      <td>786578</td>
    </tr>
  </tbody>
<table>

隐藏和显示 tr 表

$(document).on('change', 'div input', function() 
        var checked = $(this).is(":checked");

        var index = $(this).parent().index();
            $('table thead tr ').each(function() 
                if(checked) 
                    $(this).find("th").eq(index).show();
                 else 
                    $(this).find("th").eq(index).hide(); 
                
            );

            $('table tbody tr ').each(function() 
                if(checked) 
                    $(this).find("td").eq(index).show();
                 else 
                    $(this).find("td").eq(index).hide(); 
                
            );
    );

这个代码将表格导出到excel。 （插件）

$(document).ready(function() 
        $("#btnExport").click(function () 
                $("#tableexport").btechco_excelexport(
                    containerid: "tableexport"
                   , datatype: $datatype.Table
                );
            );
    );

【问题讨论】：

导出时，您可以通过表运行，检查其可见性并将可见内容写入对象并将其发送到您的函数。

【参考方案1】：

试试这个：

$(document).ready(function() 
    $("#btnExport").click(function () 
            $("#tableexport").clone(true, true)
                             .find(':not(:visible)').remove()
                             .end().prop('id', 'customId').btechco_excelexport(
                                 containerid: "customId"
                                , datatype: $datatype.Table
                             );
    );
);

它克隆表并删除不可见的所有内容，然后导出该表。

【讨论】：

谢谢卡尔。但是我应该在 id 和 customid 中写什么。因为当我这样尝试时，代码不起作用。 .end().prop('#tableexport', '#tableexport2').btechco_excelexport( containerid: "tableexport2" , datatype: $datatype.Table

@user3089464 不不不，.prop('id', 'yourCustomIdHere) 将表的 id 更改为您的自定义 id。您不应该有 2 个具有相同 id 的元素，这就是您更改它的原因:) 由于您更改了 id，您需要在 containerid 参数中更改它。

像 user3089464 一样，在执行@Karl-AndréGagnon 的代码后，按钮停止工作。代码有道理，但是为什么按钮不起作用？？

@gmaggio 我想帮助你，但没有代码示例，我无法真正指出问题所在。

@Karl-AndréGagnon 我很抱歉。你说的对。但经过进一步调查，结果发现我使用了插件 user3089464，即。 jquery.btechco.excelexport.js，如果没有先将克隆的元素插入页面，则无法打印它。我将在答案部分提供代码。

【参考方案2】：

只是对 @Karl-AndréGagnon 答案的修改。原来使用的插件，即。 jquery.btechco.excelexport.js，如果没有先将克隆的元素插入页面，则无法打印它。

$(document).ready(function() 

    $("#btnExport").click(function() 

        $('#customId').remove();

        $("#tableexport").clone(true, true)
            .find(':not(:visible)').remove()
            .end().prop('id', 'customId')
            .insertAfter('#tableexport')
            .css('display','none')
            .btechco_excelexport(
                containerid: "customId"
                    , datatype: $datatype.Table
            );

    );

);

【讨论】：

很好的补充。您还可以在导出后删除表格以获得更清晰的 html。

@Karl-AndréGagnon 是的，我考虑过这一点，但不幸的是，在插件执行 (btechco_excelexport()) 之后，以下堆栈中的任何进程似乎都被忽略了。这可能是插件的限制。要么那个，要么我可能做错了..：P

也许插件没有返回 jquery 对象，所以你不能链接。

也许.. 我不确定。我所知道的是，它将 HTML 表格转换为 excel 文件进行保存。