Question

我正在尝试将HTML表格导出为excel文件。不应导出任何隐藏的列。

以下作品：

var table_div = document.getElementById('MyTable');
$(table_div).find('[style*="display: none"]').remove();

var table_html = table_div.outerHTML.replace(/ /g, '%20');

但是当我导出时，所有隐藏的列都会从我的表中删除。

我尝试在删除隐藏列之前克隆表：

var table_div = document.getElementById('MyTable');
var cloned_table_div = $(table_div).clone().find('[style*="display: none"]').remove();

var table_html = cloned_table_div.outerHTML.replace(/ /g, '%20');

但这会在chrome中产生错误“无法读取属性'替换'未定义”。我试过检查一下，看看cloned_table_div.outerHTML是否未定义，它似乎是。我做错了什么？

Answer 1

函数.find(...)和.remove()不会返回克隆表。他们返回jQuery object，而不是Element。
要从Element获得jQuery object，您应该jQuery .get()。

＆＃13;

var table_div = document.getElementById('MyTable');
var cloned_table_div = $(table_div).clone();
cloned_table_div.find('[style*="display: none"]').remove();

var table_html = cloned_table_div.get(0).outerHTML.replace(/ /g, '%20');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="MyTable">
    <span style="display: none"></span>
</div>

＆＃13;

Answer 2

@Thanasis是正确的。 cloned_table_div是一个jquery元素。

您可以通过两种方式完成此任务。其中之一是从jquery对象中获取HTML，如此

var table_div = document.getElementById('myTable');

$(table_div).clone().appendTo(".newTable");
console.log(cloned_table_div["0"].outerHTML)

第二个是将克隆的数据附加到一个新的div标签中，然后对该div标签执行所有必要的操作。像这样的东西

  var table_div = document.getElementById('myTable');
  $(table_div).clone().appendTo(".newTable");
  var newtable_div = document.getElementById('newTable');
  $(newtable_div).find('[style*="display:none"]').remove();
  newtable_div.outerHTML.replace(/ /g, '%20');

  newtable_div.outerHTML = ""

无法读取未定义的属性'replace'（在克隆的html表上）

2 个答案: