如何使用jQuery仅将可见的tr表导出为ex​​cel

Question

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

但是，如何才能导出excel只显示可见的tr表？

表。的

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

此代码将表导出为ex​​cel。 （插件）

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

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

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

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

    });

});