如何避免 js 更新 <table> 时的闪烁？

[johnnyb]

一个部门管理的界面，希望[增/删/改/查]时只刷新表格内容，目前是这样做的，
php 模板放个<table>标签占位，具体内容由 js 生成：

// file: views/index.php

<div>
<table id="data_table">
<!-- 留空，让 js 来填充数据 -->
</table>
</div>

// file: index.js

var fill_table = function() {
var table_html = '<tbody>…</tbody>';
$('#data_table').html(table_html);
};

$('#data_table').ready(fill_table);

虽然可以局部刷新，但是会闪烁 :( 该如何避免？

嵌 C 码农首次接触 WEB，完全不懂章法，也不知上面做法对不对，请指教 :-S

[Kaiyuan]

我是替换内容前将标签设置成透明然后再替换内容之后再显示。
我现在的一个「坑」就是用这用方式替换内容： http://boxks.github.io/html_css/?easypage


或者你可以替换之前在旁边创建一个标签存放内容然后滑动替换原来的内容。

[FrankFang128]

我做了易得 demo ，没有发现你说的「闪烁」 http://jsbin.com/AJUSAgI/1/edit
有可能是因为你生成的数据很多，以至于 table 会在渲染时突然白一下。
我不知道为什么你不接受闪烁，你要解决这个问题可以从视觉的角度下手。
比如给 table 一个淡入淡出，或者添加一个 loading gif。
总之你的描述不是很清楚。

[FrankFang128]

为什么 V2ex 不能编辑已经 post 了的话，打错了一个词：
「我做了易得 demo」=> 「我做了一个 demo」

[johnnyb]

感谢 @Kaiyuan @FrankFang128 的回答。我这边闪烁明显，大概是因为整个<tbody>都在js中生成，在更新的时候，底部文字会往上收缩。

初步的想法是，php 模板里面先放一个空白的 <tbody>，然后在 js 中更新每个单元格中的内容，不知道这样效率如何。

滑动替换很赞，待我‘研究’一下怎么实现。

[FrankFang128]

@johnnyb 你给 table 一个固定高度就可以了吧

[FrankFang128]

@johnnyb 理论上你这种频繁用JS访问HTML的方法效率不高，但只要不超过1s，用户不会在意的。

[xu33]

可以用逐行更新的方式代替整体替换