在网页上动态更新 table 的最简单实现 (java/css)

Question

我已经用谷歌搜索并研究了几天；我正在尝试在我已完成项目的网站页面上实施动态更新 table。我遇到过 "DataTables Table plug-in for jQuery"，它看起来很巧妙并使用 CSS，并支持 "DOM, Javascript, Ajax and server-side processing." 我基本上只想在我的页面上安装一个类似 Excel 的 table这是可滚动的，不需要我在每次更新时重新发布该页面或将 Java 行添加到 table 文件并在我每次有新内容时将文件上传到我的主机。我正在考虑使用 Google Docs 电子表格，因为我在 Google Calendar 上取得了成功......但是经过数周的摆弄 gcal-flow+jQuery 以使其正常工作并且 formatted/styled，我对处理另一个这样的 Google 项目感到不安。另外，我对 SQL 一无所知，而且最后期限即将到来 :( 另外，我的每月数据最终将翻一番和三倍，因此电子表格将处理很多行。

Google 文档是去这里的方式吗？编写 java 文档并上传是否更容易？原谅我知识有限；感觉好像我缺少一个非常明显的解决方案来解决我的困境。

Answer 1

您没有提供网站的详细信息，无论是运行ning on Apache 还是其他网站。好吧，假设 PHP 可以运行在那里，你可以用它来动态生成 table.

我会给你一个代码片段，它可能对你有帮助，当然可以根据你的需要定制它。

创建一个PHP文件，我们称它为"dynamicTable.php"。谁的内容将是 -

<html>
    <body>
        <!-- The following part is the css, modify it as per your needs -->
        <style>
            .table1 {
              color:blue;
            }
        </style>
        <!-- This part is the actual table, the data being generated dynamically by PHP -->
        
        <table class="table1">
        <?php
         /* Get contents from the data file */
         $tableContents = file_get_contents("tableData.txt");
         
         /* Split it out in rows */
         $tableContents = explode("\n",$tableContents);
         
         /* Generate the table based on the data */
         foreach($tableContents as $i=>$v)
         {
        ?>
         <tr>
        <?
          /* Splits the items in a row by TAB character, or more than 1 spaces */
          $row = preg_split('/\s+/', $v);
          
          foreach ($row as $item)
          {
           echo ($i==0 ? "<th>":"<td>").$item.($i==0 ? "</th>":"</td>");
          }
        ?>
         </tr>
        <?php
         }
        ?>
        </table>
    </body>
</html>

在与 dynamicTable.php 文件相同的文件夹中创建一个 tableData.txt 文件，并将您的内容放在那里，例如


    Column1 Column2 Column3 Column4 Column5
    Mazda   BMW Audi    Honda   Hyundai
    RX7 GT3 A7  Accord  Santro

第一行是 table 列 headers，此后每行代表一行。在每一行中，数据项由 tab-space (tab-key).

分隔

为了使页面动态化，您只需在您的服务器中编辑此文本文件并编辑/添加您想要的值。并且它会自动反映在您的页面中，而无需 re-publish 实际页面。

相反，您可以选择 JQuery / Ajax，如果您想让页面真正动态化（我发现这不是您的要求）。这将使页面 auto-refresh 在浏览器中打开时，当您更新/编辑数据文件中的值时。

在网页上动态更新 table 的最简单实现 (java/css)

Easiest implement for a dynamically updating table on a webpage (java/css)

html

javascript

css

datatable

jquery