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 で動作するコードを実行することはできません。ロードされていない DOM 要素にはまだ JavaScript からアクセスできないため、なぜそうなるのかは明らかです。

利用可能なオプションは次のとおりです。

  1. ページ内で、変更する DOM の部分の直後にスクリプトを見つけます。物事は純粋な順序でロードされるため、HTML ファイルでスクリプトの前に物理的に配置されている DOM の任意の部分を操作できます。

  2. コードに使用document.ready()し、DOM 全体がロードされた後にテーブルを操作するだけです。

  3. 最初は CSS でテーブルを非表示にして、最初は表示されないようにします。上記の 2 つの方法のいずれかを使用して変更し、変更が完了したら、表を表示します。これにより、テーブルを変更する前にテーブルが表示されなくなります。

テーブルのデータのフェッチに ajax 呼び出しが関係している場合は、DOM がロードされる前にその ajax 呼び出しを開始し、完了時にその結果を保存するだけでさらに最適化できます (DOM がまだ準備されていない場合)。これにより、DOM の読み込みと同時に ajax 呼び出しがフェッチされるように、2 つの操作が並列化されます。次に、ajax 呼び出しが完了し、DOM が読み込まれると、ajax の結果を DOM に挿入できます。

于 2012-12-04T22:59:00.990 に答える