HTML：最快/最好的方法來更新一個大表

所有，HTML：最快/最好的方法來更新一個大表

我的工作，其中包括一個大型數據表的HTML頁面上許多單元格的內容（jQuery的或JavaScript）。

當用戶與該頁面上的各種控件進行交互時，我想要更新表中的數據，而不重新加載頁面。

換句話說，當用戶更改控件的值時，會觸發一個執行若干計算的JavaScript函數，然後「更新」表中的數據。在典型的情況下，需要更新50到500個單元。

我基線的方法：

分配給每個<td>小區的唯一ID
在JavaScript函數，使用document.getElementById()去每個單元格的引用，需要更新
使用innerHTML更新這些細胞

這工作正常，但它可能非常緩慢。例如，是否每個調用innerHTML強制瀏覽器重新呈現整個表？換句話說 - 更新500個單元觸發500'重新渲染'？或者，瀏覽器只在函數完成後才重新渲染表格？

長話短說，做這件事的最好方法是什麼？

我目前的做法？
在JavaScript中重新創建整個表格作爲字符串，然後使用ONE調用innerHTML上的div包含表？
別的東西？

我最近看了保羅愛爾蘭的優秀（IMO）介紹有關優化JavaScript性能：

DOM, HTML5, & CSS3 Performance

在這方面，他介紹了更改「關DOM」;不幸的是 - 這大部分都在我頭上，他的演示文稿不包含任何實際的代碼示例。

我更喜歡直接的JavaScript解決方案，但我也很滿意jQuery解決方案。

非常感謝您的任何建議或見解。

來源

2011-05-04 mattstuehler

我認爲使用innerHTML是要走的路。如果每個單元都有自己的ID，那麼瀏覽器不需要刷新整個表來更新單個單元。我正在使用我當前正在構建的網站中的innerHTML，它的工作速度非常快。只要您將功能分配到應該正常工作的正確操作即可。如果多個單元格具有相同的值，那麼請考慮使用類，在這種情況下，jQuery確實可以更輕鬆地引用類。

所以基本上，使用你目前的方法。只需在需要時渲染每個單元是最快的方法（從我的理解和邏輯）

來源

2011-05-04 14:16:30 Richard

您正在採取的方法是好的。但是，最好使用jQuery或其他抽象庫，這將在各種瀏覽器中處理innerHtml實現中的任何怪癖（某些瀏覽器區分大小寫）;這會讓你的生活更輕鬆，讓你專注於開發自己的邏輯，而不是專注於瀏覽器特性。

來源

2011-05-04 14:18:31

這個問題可能是爭論......但我會建議使用像jQuery jGrid plugin

在我看來可能是這樣更好

來源

2011-05-04 14:24:05 mcgrailm

McGrailm - 非常感謝這個建議。這個插件比我在這個項目中需要的更多，但它看起來像一個很棒的工具，所以我非常欣賞這個提示。 – mattstuehler 2011-05-04 14:58:56

HTML：最快/最好的方法來更新一個大表

回答

相關問題