Question

我想在html编码时说我非常新手。

我目前正在excel中构建一个相对较大的数据库（2000个条目），我想在我的网站上提供该数据库。我开始做的是将excel数据转换为html数据，然后使用DataTables jQuery插件将其转换为一个很好的可搜索的html表。这是我的代码：

<html>
<head>

<link rel="stylesheet" type="text/css" href="DataTables-1.10.13/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-2.2.4/dt-1.10.13/fh-3.1.2/datatables.min.js"></script>

<style>
  some style options
</style>

<script type="text/javascript" charset="utf-8">
  $(document).ready(function() {
    $('#booklist').dataTable({
    });
  });
</script>
</head>

<body>
<table id="booklist" class="display">
 Table data here
</table>
</body>
</html>

我仍在定期更新数据库，并且每次都要在文档中复制和粘贴新的表数据很烦人，特别是因为它代表了大约10000行。

我想知道是否有办法将表格数据保存在一个单独的文件中，比如b.html，并以这样的方式导入它，因为它的解释方式与简单地粘贴它的内容相同直接在我的原始代码中出现“Table data here”。

我尝试使用jQuery .load()函数，但无法使其工作。我使用CSS格式化是否有问题？

让我知道您认为我的问题的最佳解决方案。

谢谢！

Answer 1

您可以使用0000000000400630 <_Z4Mainv>: 400630: 4c 8d 54 24 08 lea 0x8(%rsp),%r10 400635: 48 83 e4 e0 and $0xffffffffffffffe0,%rsp 400639: b8 20 00 00 00 mov $0x20,%eax 40063e: c5 f9 ef c0 vpxor %xmm0,%xmm0,%xmm0 400642: ba 25 08 40 00 mov $0x400825,%edx 400647: 41 ff 72 f8 pushq -0x8(%r10) 40064b: 55 push %rbp 40064c: 48 89 e5 mov %rsp,%rbp 40064f: 41 52 push %r10 400651: 48 81 ec 08 03 00 00 sub $0x308,%rsp 400658: c5 fd 7f 85 50 fd ff ff vmovdqa %ymm0,-0x2b0(%rbp) 400660: c5 fd 7f 85 30 fd ff ff vmovdqa %ymm0,-0x2d0(%rbp) 400668: c5 fd 7f 85 10 fd ff ff vmovdqa %ymm0,-0x2f0(%rbp) 400670: c5 fd 7f 85 f0 fc ff ff vmovdqa %ymm0,-0x310(%rbp) 400678: c5 fd 7f 85 d0 fd ff ff vmovdqa %ymm0,-0x230(%rbp) 400680: c5 fd 7f 85 b0 fd ff ff vmovdqa %ymm0,-0x250(%rbp) 400688: c5 fd 7f 85 90 fd ff ff vmovdqa %ymm0,-0x270(%rbp) 400690: c5 fd 7f 85 70 fd ff ff vmovdqa %ymm0,-0x290(%rbp) 400698: 0f 1f 84 00 00 00 00 00 nopl 0x0(%rax,%rax,1) 4006a0: 48 83 c2 01 add $0x1,%rdx 4006a4: c6 84 05 f0 fc ff ff 01 movb $0x1,-0x310(%rbp,%rax,1) 4006ac: 0f b6 42 ff movzbl -0x1(%rdx),%eax 4006b0: 84 c0 test %al,%al 4006b2: 75 ec jne 4006a0 <_Z4Mainv+0x70> 4006b4: c5 f9 ef c0 vpxor %xmm0,%xmm0,%xmm0 4006b8: 31 c0 xor %eax,%eax 4006ba: c5 fd 7f 85 50 fe ff ff vmovdqa %ymm0,-0x1b0(%rbp) 4006c2: c5 fd 7f 85 30 fe ff ff vmovdqa %ymm0,-0x1d0(%rbp) 4006ca: c5 fd 7f 85 10 fe ff ff vmovdqa %ymm0,-0x1f0(%rbp) 4006d2: c5 fd 7f 85 f0 fd ff ff vmovdqa %ymm0,-0x210(%rbp) 4006da: c5 fd 7f 85 d0 fe ff ff vmovdqa %ymm0,-0x130(%rbp) 4006e2: c5 fd 7f 85 b0 fe ff ff vmovdqa %ymm0,-0x150(%rbp) 4006ea: c5 fd 7f 85 90 fe ff ff vmovdqa %ymm0,-0x170(%rbp) 4006f2: c5 fd 7f 85 70 fe ff ff vmovdqa %ymm0,-0x190(%rbp) 4006fa: c5 fd 7f 85 f0 fe ff ff vmovdqa %ymm0,-0x110(%rbp) 400702: c5 fd 7f 85 10 ff ff ff vmovdqa %ymm0,-0xf0(%rbp) 40070a: c5 fd 7f 85 30 ff ff ff vmovdqa %ymm0,-0xd0(%rbp) 400712: c5 fd 7f 85 50 ff ff ff vmovdqa %ymm0,-0xb0(%rbp) 40071a: c5 fd 7f 85 70 ff ff ff vmovdqa %ymm0,-0x90(%rbp) 400722: c5 fd 7f 45 90 vmovdqa %ymm0,-0x70(%rbp) 400727: c5 fd 7f 45 b0 vmovdqa %ymm0,-0x50(%rbp) 40072c: c5 fd 7f 45 d0 vmovdqa %ymm0,-0x30(%rbp) 400731: 0f 1f 80 00 00 00 00 nopl 0x0(%rax) 400738: 0f b6 94 05 f0 fc ff ff movzbl -0x310(%rbp,%rax,1),%edx 400740: 0f b6 8c 05 f0 fe ff ff movzbl -0x110(%rbp,%rax,1),%ecx 400748: 84 d2 test %dl,%dl 40074a: 75 08 jne 400754 <_Z4Mainv+0x124> 40074c: 0f b6 94 05 f0 fd ff ff movzbl -0x210(%rbp,%rax,1),%edx 400754: 38 d1 cmp %dl,%cl 400756: 75 2c jne 400784 <_Z4Mainv+0x154> 400758: 48 83 c0 01 add $0x1,%rax 40075c: 48 3d 00 01 00 00 cmp $0x100,%rax 400762: 75 d4 jne 400738 <_Z4Mainv+0x108> 400764: c5 f9 ef c0 vpxor %xmm0,%xmm0,%xmm0 400768: 31 c0 xor %eax,%eax 40076a: c4 e2 7d 17 c0 vptest %ymm0,%ymm0 40076f: 0f 94 c0 sete %al 400772: c5 f8 77 vzeroupper 400775: 48 81 c4 08 03 00 00 add $0x308,%rsp 40077c: 41 5a pop %r10 40077e: 5d pop %rbp 40077f: 49 8d 62 f8 lea -0x8(%r10),%rsp 400783: c3 retq 400784: b9 60 08 40 00 mov $0x400860,%ecx 400789: ba 26 00 00 00 mov $0x26,%edx 40078e: be 29 08 40 00 mov $0x400829,%esi 400793: bf 38 08 40 00 mov $0x400838,%edi 400798: c5 f8 77 vzeroupper 40079b: e8 50 fd ff ff callq 4004f0 <__assert_fail@plt>元素并将<link>属性设置为rel，使用import元素的.import属性获取数据，该元素返回{{1} }}

link

document

Answer 2

我想知道是否有办法将表数据保存在一个单独的文件中，例如b.html，并以这样的方式导入它，因为它的解释方式与简单地直接粘贴它的内容一样“此处的表数据”出现在我的原始代码中。

你肯定有正确的想法。您可以对HTML（或任何类型的数据）发出HTTP请求。有多种方法可以做到这一点，但一种简单的方法是使用jQuery的$(...).load('/...')函数，就像你现在所做的那样。

$( "#result" ).load( "test.html" );

其中result是您希望使用test.html

值填充的div的ID

这将请求test.html并将文档放入ID为result的div中。

在幕后，$(...).load()异步发送请求，并在请求完成时更新元素。除了URL之外，还应该在加载调用完成后提供回调以运行代码。因此，我们可以在 html加载后调用DataTable() 。

// this URL would be an http://... in actual use // table taken from w3schools let url = "data:text/html,%3Ctable%20id%3D%22my-table%22%3E%0A%20%20%3Ctr%3E%0A%20%20%20%20%3Cth%3ECompany%3C%2Fth%3E%0A%20%20%20%20%3Cth%3EContact%3C%2Fth%3E%0A%20%20%20%20%3Cth%3ECountry%3C%2Fth%3E%0A%20%20%3C%2Ftr%3E%0A%20%20%3Ctr%3E%0A%20%20%20%20%3Ctd%3EAlfreds%20Futterkiste%3C%2Ftd%3E%0A%20%20%20%20%3Ctd%3EMaria%20Anders%3C%2Ftd%3E%0A%20%20%20%20%3Ctd%3EGermany%3C%2Ftd%3E%0A%20%20%3C%2Ftr%3E%0A%20%20%3Ctr%3E%0A%20%20%20%20%3Ctd%3ECentro%20comercial%20Moctezuma%3C%2Ftd%3E%0A%20%20%20%20%3Ctd%3EFrancisco%20Chang%3C%2Ftd%3E%0A%20%20%20%20%3Ctd%3EMexico%3C%2Ftd%3E%0A%20%20%3C%2Ftr%3E%0A%20%20%3Ctr%3E%0A%20%20%20%20%3Ctd%3EErnst%20Handel%3C%2Ftd%3E%0A%20%20%20%20%3Ctd%3ERoland%20Mendel%3C%2Ftd%3E%0A%20%20%20%20%3Ctd%3EAustria%3C%2Ftd%3E%0A%20%20%3C%2Ftr%3E%0A%20%20%3Ctr%3E%0A%20%20%20%20%3Ctd%3EIsland%20Trading%3C%2Ftd%3E%0A%20%20%20%20%3Ctd%3EHelen%20Bennett%3C%2Ftd%3E%0A%20%20%20%20%3Ctd%3EUK%3C%2Ftd%3E%0A%20%20%3C%2Ftr%3E%0A%20%20%3Ctr%3E%0A%20%20%20%20%3Ctd%3ELaughing%20Bacchus%20Winecellars%3C%2Ftd%3E%0A%20%20%20%20%3Ctd%3EYoshi%20Tannamuri%3C%2Ftd%3E%0A%20%20%20%20%3Ctd%3ECanada%3C%2Ftd%3E%0A%20%20%3C%2Ftr%3E%0A%20%20%3Ctr%3E%0A%20%20%20%20%3Ctd%3EMagazzini%20Alimentari%20Riuniti%3C%2Ftd%3E%0A%20%20%20%20%3Ctd%3EGiovanni%20Rovelli%3C%2Ftd%3E%0A%20%20%20%20%3Ctd%3EItaly%3C%2Ftd%3E%0A%20%20%3C%2Ftr%3E%0A%3C%2Ftable%3E"; // need to give `load` a callback so we can run code *after* the HTML loads $('#result').load(url, function () { $('#my-table').DataTable(); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" rel="stylesheet"/> <script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script> <div> <div>result get populated below:</div> <div id="result"> </div> </div>

让我知道您认为我的问题的最佳解决方案。

如果你有一个巨大的电子表格，你可以将其保存为CSV并使用a CSV parser将表格中的每一行转换为html中的一行。这包括：

使用jquery（或fetch）将数据作为CSV
的ajax请求
将其解析为数组

将其转换为HTML行并将其添加到文档

然后最后致电DataTables()

但是如果您的数据库相对较大，那么您应该尝试使用动态分页，这在没有服务器代码（nodejs，php，java等）的情况下很难。

在几个文件中拆分大型html文件

2 个答案: