使用Javascript从文本文件创建HTML表格？ [英] Create HTML table from text file using Javascript?

问题描述

我甚至不知道我的项目是否可行。在环顾几个小时并阅读其他SO问题后，我的希望正在慢慢消失。但它不会阻止我提问！

我的项目：创建一个简单的HTML表格，为我的上级分类我们的销售团队电话活动。目前我需要从文件中提取数据值并在表格中使用这些值。

我的问题：Javascript甚至可以这样做吗？我知道它读取客户端计算机上的cookie，但是它可以读取与网页相同目录中的文件吗？ （如果网页在公司服务器上？）

我的进度：我会更新，因为我找到更多信息。

更新：许多人对文件的存储方式感到好奇。它是我们的文件服务器上的静态网页（ table.html ）。文本文件（ data.txt ）将位于同一目录中。

我最近完成了一个项目，其中的条件与我自己的条件几乎完全相同（唯一的区别是用户完全使用IE）。

我最终使用JQuery的 $。ajax（）函数，并从XML文件中提取数据。

这个解决方案确实需要使用Microsoft Access或Excel。我早在2003版本中使用过，但后来的版本工作得很好。

我的数据保存在Access表格中（在Excel上我使用了一个列表）。一旦你在Access中创建了你的表格，它实际上就像点击'Export'一样简单，保存为XML，然后使用'ajax（）'函数（ http://api.jquery.com/jQuery.ajax/ ）来操作你想要输出的数据，然后用CSS / HTML来布局你的页面。

我建议使用Access，因为在以正确的方式导出XML方面没有什么好处，尽管Excel只需稍微修改就可以完成。

以下是ms-access的步骤：

在access&以XML格式导出

生成的XML如下所示：

 <？xml version =1.0encoding =UTF-8？> 
< dataroot xmlns：od =urn：schemas-microsoft-com：officedataxmlns：xsi =http://www.w3.org/2001/XMLSchema-instancexsi：noNamespaceSchemaLocation =调用。 xsdgenerated =2013-08-12T19：35：13> 
<通话> 
< CallID> 1< / CallID> 
<顾问>珍娜< /顾问> 
< AHT> 125< / AHT> 
< Wrap> 13< / Wrap> 
< Idle> 6< / Idle> 
< /通话> 
<通话> 
< CallID> 3< / CallID> 
<顾问>爱德华< /顾问> 
< AHT> 90< / AHT> 
< Wrap> 2< / Wrap> 
< Idle> 4< / Idle> 
< /通话> 
<通话> 
< CallID> 2< / CallID> 
<顾问>马特< /顾问> 
< AHT> 246< / AHT> 
< Wrap> 11< / Wrap> 
< Idle> 5< /空> 
< /通话> 
  

HTML示例

 < table id =doclib> 
< th>第>第< th>第< th>第wrap< th>第i空< th>< / tr> 
< / table> 
  

jQuery：

  $（document）.ready（function（）{
 $ .ajax（{
 type：GET，
 url：Calls .xml，
 dataType：xml，
 success：function（xml）{
 $（xml）.find（'Calls'）。each（function（）{$ b $文本（），
 aht = $（this）.find（'AHT'）。text（），
 wrap = $（this）.find（'Advisor'）。 ），
 idle = $（this）.find（'Idle'）。text（），
 td =，
 tdc =< / td>; 
 $（'＃doclib'）。append（< tr> + 
 td + advisor + tdc + td + aht + tdc + td + wrap + tdc + td + idle + tdc +< / tr>）
}）; 
} 
}）; 
}）; 
  

I don't even know if my project is possible. After looking around for a few hours and reading up on other SO questions, my hopes are slowly diminishing. But it will not stop me from asking!

My Project: To create a simple HTML table categorizing our Sales Team phone activity for my superior. Currently I need something to pull data values from a file and use those values inside the table.

My Problem: Can Javascript even do this? I know it reads cookies on the client side computer, but can it read a file in the same directory as the webpage? (If the webpage is on the company server?)

My Progress: I will update as I find more information.

Update: Many of you are curious about how the file is stored. It is a static webpage (table.html) on our fileserver. The text file (data.txt) will be in the same directory.

解决方案

I've recently completed a project where i had almost the exact conditions as yourself (the only difference is that users exclusively use IE).

I ended up using JQuery's $.ajax() function, and pulled the data from an XML file.

This solution does require the use of either Microsoft Access or Excel. I used as early as the 2003 version, but later releases work just fine.

My data is held in a table on Access (on Excel i used a list). Once you've created your table in Access; it's honestly as simple as hitting 'Export', saving as XML and then playing around with your 'ajax()' function (http://api.jquery.com/jQuery.ajax/) to manipulate the data which you want to be output, and then CSS/HTML for the layout of your page.

I'd recommend Access as there's less hastle in getting it to export XML in the right manner, though Excel does it just fine with a little more tinkering.

Here's the steps with ms-access:

Create table in access & export as XML

The XML generated will look like:

<?xml version="1.0" encoding="UTF-8"?>
<dataroot xmlns:od="urn:schemas-microsoft-com:officedata" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  xsi:noNamespaceSchemaLocation="Calls.xsd" generated="2013-08-12T19:35:13">
<Calls>
    <CallID>1</CallID>
    <Advisor>Jenna</Advisor>
    <AHT>125</AHT>
    <Wrap>13</Wrap>
    <Idle>6</Idle>
</Calls>
<Calls>
    <CallID>3</CallID>
    <Advisor>Edward</Advisor>
    <AHT>90</AHT>
    <Wrap>2</Wrap>
    <Idle>4</Idle>
</Calls>
<Calls>
    <CallID>2</CallID>
    <Advisor>Matt</Advisor>
    <AHT>246</AHT>
    <Wrap>11</Wrap>
    <Idle>5</Idle>
</Calls>

Example HTML

<table id="doclib">
    <tr><th>Name</th><th>AHT</th><th>Wrap</th><th>Idle</th></tr>
</table>

jQuery:

$(document).ready(function(){
$.ajax({
    type: "GET",
    url: "Calls.xml",
    dataType: "xml",
    success: function(xml) {
        $(xml).find('Calls').each(function(){
            var advisor = $(this).find('Advisor').text(),
                aht = $(this).find('AHT').text(),
                wrap = $(this).find('Wrap').text(),
                idle = $(this).find('Idle').text(),
                td = "<td>",
                tdc = "</td>";
            $('#doclib').append("<tr>" + 
                td + advisor + tdc + td + aht + tdc + td + wrap + tdc + td + idle + tdc + "</tr>")  
            });
        }
    });
});

这篇关于使用Javascript从文本文件创建HTML表格？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！