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

时间:2015-01-15 19:58:55

标签: javascript jquery html css datatable

我已经用Google搜索并研究了几天;我正在尝试在我已经完成的项目网站的页面上实现动态更新表。我遇到过“用于jQuery的DataTables Table插件”,它看起来很光滑并且使用CSS,并且支持“DOM,Javascript,Ajax和服务器端处理”。我基本上只想在我的页面上安装一个类似Excel的表,它可以滚动,不要求我每次更新都重新发布那个页面,或者将Java行添加到表文件中,每次都将文件上传到我的主机我有新内容。我正在考虑使用谷歌文档电子表格,因为我已经成功使用谷歌日历...但经过数周的gcal-flow + jQuery来完成工作和格式化/样式化,我很害怕处理另一个这样的谷歌承诺。此外,我不了解任何SQL,以及即将到来的截止日期:(此外,我的每月数据最终将翻倍和三倍,因此电子表格将处理大量行。

Google Docs是否可以成为这里的一种方式?是否更容易编写java文档并上传?原谅我有限的知识;感觉我错过了一个解决我的困境的非常明显的解决方案。

1 个答案:

答案 0 :(得分:2)

您没有提供您网站的详细信息,无论是在Apache上运行还是其他内容。假设PHP可以在那里运行,你可以使用它来动态生成表。

我会给你一个代码片段,它可以帮助你,当然可以根据你的需要进行自定义。

  1. 创建一个PHP文件,我们称之为“dynamicTable.php”。其中的内容是什么 -
  2. <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>

    1. 在与dynamicTable.php文件相同的文件夹中创建一个tableData.txt文件,并在那里放下您的内容,例如
    2. 
          Column1 Column2 Column3 Column4 Column5
          Mazda   BMW Audi    Honda   Hyundai
          RX7 GT3 A7  Accord  Santro
      

      第一行是表格列标题,然后每行代表一行。在每一行中,数据项由制表符空格(制表符键)分隔。

      为了使页面动态化,您只需在服务器中编辑此文本文件并编辑/添加所需的值。它将自动反映在您的页面中,而无需重新发布实际页面。

      1. 相反,你可以去寻找一个JQuery / Ajax,如果你想让这个页面真的是动态的(我发现这不是你的要求)。当您在浏览器中打开页面时,当您更新/编辑数据文件中的值时,这将使页面自动刷新。