0

我有一个带有时间列的 HTML 表，我想更改其值。但是，当我在 document.ready() 中执行此操作时，DOM 操作会严重影响我的加载时间。

是否可以在 DOM 加载之前更改表格列单元格的值？我需要用于操作的代码是 -

var time_col = rows[i].cells[TimeColumnIndex];    

//Calculate new values
var time_Str = getUpdatedValue(time_col.innerText);

//Set values
time_col.innerText = time_Str;
time_col.innerHTML = time_Str;

我将不胜感激人们提出的任何建议，我仍在尝试了解与 DOM 相关的内容，所以如果无法做到，请随时告诉我。

编辑1：

getUpdatedValue() 函数只是获取用户时区与 UTC 相比的差异，并添加所需的分钟数。

我尝试注释掉每一行以查看哪些行实际上增加了加载时间，我发现这只是 DOM 操作需要时间，即以下几行

time_col.innerText = time_Str;
time_col.innerHTML = time_Str;

我的 HTML 表有大约 1500 行，所以我遍历每一行并更改时间列的值。

4

2 回答 2

4

如果由于某种原因，您需要在加载表格后立即运行代码，您可以将<script>标签紧跟在结束</table>标签之后

<table>
   <tbody>
     <tr><td>A</td><td>B</td></tr>
   </tbody>
</table>
<script type="text/javascript"> 
    var tables = document.getElementsByTagName("table");
    var tableAbove = tables[tables.length - 1];
</script>
于 2012-12-04T22:19:02.407 回答
0

在 DOM 加载之前，您不能运行在 DOM 上运行的代码。希望您很清楚为什么会出现这种情况，因为 javascript 尚无法访问未加载的 DOM 元素。

您可用的选项如下：

  1. 在您要修改的 DOM 部分之后立即在您的页面中找到您的脚本。由于事物是按纯顺序加载的，因此您可以操作 HTML 文件中位于脚本之前的 DOM 的任何部分。

  2. 用于document.ready()您的代码，只需在加载整个 DOM 后对表进行操作。

  3. 最初使用 CSS 隐藏表格，使其最初不可见。使用上述两种方法中的任何一种进行修改，然后在完成修改后显示表格。这可以防止表格在您修改之前可见。

如果 ajax 调用涉及获取表的数据，您可以通过在加载 DOM 之前启动该 ajax 调用来进一步优化事情，并在它完成时存储它的结果（如果 DOM 尚未准备好）。这将两个操作并行化，以便在加载 DOM 的同时获取 ajax 调用。然后，当 ajax 调用完成并加载 DOM 时，您可以将 ajax 结果插入 DOM。

于 2012-12-04T22:59:00.990 回答