【问题标题】:How to format csv to html table rows and columns using Javascript如何使用 Javascript 将 csv 格式化为 html 表格行和列
【发布时间】:2013-01-05 01:44:32
【问题描述】:

如何使用 javascript 获取以下 csv 数据块并将其转换为 tr 和 td?

Jess,Female,04/26/1990,North Central College,Aix,Spring 2012,WebApp,
MC,Female,04/27/1991,Carnegie Mellon University,Aix,Spring 2012,WebApp,
Sharon,Female,04/03/1967,Hobart and William Smith Colleges,Aix,Spring 2012,WebApp,
Nancy,Female,08/15/1989,The New School,Aix,Spring 2011,WebApp,
Jacqueline,Female,03/18/1991,University of South Carolina,Aix,Spring 2011,WebApp,
Sydney,Female,12/11/1990,University of Vermont,Aix,Spring 2011,WebApp,
Kelsey,Female,12/08/1989,University of Vermont,Aix,Spring 2011,WebApp,
Oktavia,Female,11/05/1990,SUNY - Albany,Aix,Spring 2011,WebApp,
Courtney,Female,12/02/1988,Ithaca College,Aix,Spring 2009,WebApp,
Nike,Female,24.2.1989,Appleby College,Aix,Spring 2008,WebApp,
Linda,Female,8/26/1964,Kalamazoo College,Aix,Spring 2009,WebApp,
Allison,Female,12/15/1976,University of San Diego,Aix,Spring 2009,WebApp,
Carmen,Female,02/07/1988,Carnegie Mellon University,Aix,Spring 2008,WebApp,
Nora,Female,10/23/88,Eastern Washington University,Aix,Spring 2009,WebApp,
Jennifer,Female,10/27/79,University of Kansas,Aix,Spring 2009,WebApp,

所需的表格格式用于 csv 数据中的每一行。

<tr><td>Jess</td> <td>Female<td><td>04/26/1990</td><td>North Central College</td><td>Aix</td><td>Spring 2012</td><td>WebApp</td></tr>

【问题讨论】:

  • 在 JavaScript 中?该 CSV 是通过 Ajax 检索的,还是...?
  • 抱歉,是 JavaScript 和 csv 数据是通过 Ajax 检索的。刚刚更新了问题。
  • @CarlWeis 是的,但是您如何将数据输入到 Javascript 中?

标签: javascript html csv


【解决方案1】:

假设您在一个变量中拥有该 CSV 数据(无论是通过 Ajax 还是其他方式检索),那么您可以使用 .split() method 获取行数组并用逗号分隔每一行:

var data = // your data
var lines = data.split("\n"),
    output = [],
    i;
for (i = 0; i < lines.length; i++)
    output.push("<tr><td>"
                + lines[i].slice(0,-1).split(",").join("</td><td>")
                + "</td></tr>");
output = "<table>" + output.join("") + "</table>";

(字符串.slice()是忽略每一行后面的逗号。)

演示:http://jsfiddle.net/frvQ2/

【讨论】:

  • 我将如何做相反的事情。只取 tr's 和 td's 的 html 并将它们转换为 csv 格式?因为它不适用于我拥有的一些数据。
  • yourHTML.replace(/&lt;tr&gt;|&lt;td&gt;/g,"").replace(​​​​​​​​​​​​​​​​​​/&lt;\/td&gt;/g,",").replace(/&lt;\/tr&gt;/g,"\n") 会将一串 tr 和 td 元素转换回 CSV。或者调整我的答案中的代码以拆分标签并加入逗号和换行符...
  • 不断获取对象没有方法推送
  • @josh - .push() 是一个数组方法。您的对象是我的答案中显示的数组吗?
  • @josh - 我不确定你所说的“缓存它”是什么意思 - 我所做的 i 变量的范围与你在评论中显示的方式完全相同(JS使用var 声明的变量没有块作用域,只有函数作用域,因此您的更改不会影响执行)。
【解决方案2】:

怎么样:

var data = //your data

data = "<table><tr>" + 
  data.replace(/,\n/g,"<tr>")
      .replace(/,/g, "<td>")
      .replace(/<tr>$/,"") +
  "</table>";

【讨论】:

猜你喜欢
  • 2013-02-10
  • 2011-02-07
  • 1970-01-01
  • 2021-08-15
  • 1970-01-01
  • 2014-05-03
  • 1970-01-01
  • 2016-07-27
相关资源
最近更新 更多