将隐藏的数据包含在HTML页面中以进行JavaScript处理

前端之家收集整理的这篇文章主要介绍了将隐藏的数据包含在HTML页面中以进行JavaScript处理前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我从数据库中的数据生成一个复杂的HTML摘要报告,可能是数据库中可能有20万行的摘要.用户可以单击链接以请求Excel版本.

当他们做一个JS脚本提取报告的关键组件,并将它们填充到隐藏的iframe中的一个表单中.此表单提交到生成报表的Excel版本(不带图形等)的服务器端脚本.

由于报表的计算复杂且“成本高”,所以在页面上的所有数据都已经存在的情况下,再次运行它们来创建Excel版本是有意义的.此外,用户可能已经自定义报告,一旦加载,我可以使用JS将这些首选项传递到表单,所以Excel文档也反映它们.

我这样做的方式是将报告中的每个组件包含在Excel版本中的一行中.我已经劫持了没有另外使用的HTML标签.

<code id="xl_row_211865_2_x" class="rowlabel">Musicals}{40%}{28.6%}{6</code>

上面的代码元素是HTML报告中下面的行的摘要,它成为Excel文档中的一行,并包含标签和各种数据元素.一份报告中可能有一千个以上的这样的元素.

由于数据包含文本,我不得不使用像{}作为字段分隔符,因为这不太可能发生在报表中的任何实际文本中.我有代码显示:没有在CSS.

用户想要其报告的Excel版本时,JS代码会在HTML中搜索任何< code>元素,并将其className和innerHTML放在窗体中. className表示如何在Excel中格式化行,然后将数据放入Excel行的相邻单元格中.

HTML报告显示一个百分比基数(他们可以在它们之间切换),但是请求Excel版本时的用户偏好是同时包含这两个.

有更好的做法吗?

(由于这是一个复杂的网络应用程序的一部分,没有用户将要关闭CSS或缺少JavaScript或者他们不会这么远)
ADDED:我不能使用HTML5,因为用户经常在像IE6这样的旧版浏览器上

解决方法

使用新的数据属性

http://www.javascriptkit.com/dhtmltutors/customattributes.shtml

<div data-row="[[&quot;Musicals&quot;,40,28.6,6],...]">

div可以是TD标签或TR标签或已经与该行相关的任何其他相关标签,而& quot;是逃脱的“.

这使得数据隐藏起来,同时也确保了处理数据的标准解决方案.

另外对于编码数据,我建议使用JSON,因为它也是一个易于使用的标准.

猜你在找的HTML相关文章