JavaScript を使用してテーブル行のボタンに ID を動的に割り当てる

JavaScript テーブルのボタンの動的 ID 生成について

JavaScript を使用してテーブルやボタンなどの HTML 要素を動的に生成する場合、それらの要素に一意の ID を割り当てることが困難になる場合があります。これは、テーブル内の各行に個別のインタラクション用に固有のボタンが必要な場合に特に重要です。開発者は、システム内で動的 ID を割り当てようとすると、多くの場合問題に直面します。 内部HTML 細胞の。

この場合の目標は、JSON オブジェクトからテーブル行を構築し、各行内のボタンに一意の ID を動的に割り当てることです。ただし、テンプレート リテラルを使用する一般的なアプローチは、 内部HTML 期待どおりに動作しない可能性があります。これにより、スクリプトの後半でこれらのボタンを参照または操作しようとすると、問題が発生する可能性があります。

問題は JavaScript の処理方法に起因します 内部HTML およびテンプレートリテラル。適切なアプローチを行わないと、ボタンが ID 正しく表示されないか、動的更新に失敗するため、特定の行をアクションの対象にすることができなくなります。これは、動的テーブル生成でよくある落とし穴です。

この記事では、ボタン ID が行ごとに一意であることを保証する方法を使用して、表のセル内のボタンに動的 ID を正しく割り当てることで、この問題を解決する方法を検討します。独自のプロジェクトに適用できる実用的なソリューションも提供します。

JavaScript での動的なテーブル行とボタン ID の生成

動的なフロントエンド開発では、特に複数のボタンや入力フィールドを区別する必要があるシナリオでは、HTML 要素の一意の ID を生成することがユーザー インタラクションを処理するために重要になることがよくあります。上で説明したスクリプトは、テーブルの行とボタンを動的に作成し、各ボタンにテーブル内の行に対応する一意の ID を割り当てる方法を示しています。 JavaScript ループと文字列の連結を使用すると、各ボタンに「testbutton0」、「testbutton1」などの一意の識別子が割り当てられるようになります。これにより、特定のイベントをトリガーするボタンを簡単に識別できるようになり、動的コンテンツ生成の実用的なアプローチになります。

この例で使用されるコア関数の 1 つは次のとおりです。 table.insertRow()、既存の HTML テーブルに新しい行を挿入します。ループを繰り返すたびに、新しい行がテーブルに追加され、その行内に 2 つのセルが作成されます。1 つは従業員の名前用、もう 1 つはボタン用です。 2 番目のセルでは、 内部HTML ボタンとその動的に生成された ID を挿入します。ただし、使用すると 内部HTML 要素の作成には制限があり、特にボタン ID などの変数の参照に関しては制限があり、適切に処理しないとエラーが発生します。

2 番目のソリューションで実証されているより信頼性の高いアプローチでは、 document.createElement() JavaScript を通じて HTML 要素を直接作成します。この方法により、要素の作成をより適切に制御でき、より安全でモジュール化されたコードが可能になります。このソリューションは、ボタンをプログラムで作成し、JavaScript を通じて動的に ID を割り当てることにより、次のような問題が発生する可能性を回避します。 内部HTML よりクリーンで安全なコンテンツ生成方法を提供します。さらに、次のコマンドを使用すると、イベント リスナーをボタンに直接追加することが簡単になります。 addEventListener()これは、インライン イベント ハンドラーを回避するのに役立ちます。

最後に、次のことを含めます。 イベント.ターゲットID どのボタンがクリックされたかを識別するために重要です。このイベント プロパティは、イベントをトリガーした要素の ID をキャプチャし、インタラクションを正確に制御できるようにします。たとえば、ボタンをクリックすると、 doSmth() この関数はボタンの ID を警告します。これは、クリックされた特定のボタンに基づいて正しいアクションが確実に実行されるようにするのに役立ちます。この手法 (動的な行作成、一意の ID 割り当て、イベント処理) の組み合わせにより、フロントエンドで対話型のデータ駆動型テーブルを構築するための強力なソリューションになります。

function buildTable(json) {
  const table = document.getElementById("mytesttable").getElementsByTagName('tbody')[0];
  for (let i = 0; i < json.data.length; i++) {
    const newRow = table.insertRow();
    const cell1 = newRow.insertCell(0);
    const cell2 = newRow.insertCell(1);
    cell1.innerHTML = json.data[i].emp_name;
    let btnId = "testbutton" + i;
    cell2.innerHTML = \`<button id="\${btnId}" onclick="doSmth()>Click Me</button>\`;
  }
}

function doSmth() {
  alert(event.target.id);
}

// Example JSON data
const json = { data: [{ emp_name: "John Doe" }, { emp_name: "Jane Smith" }] };
buildTable(json);

function buildTable(json) {
  const table = document.getElementById("mytesttable").getElementsByTagName('tbody')[0];
  for (let i = 0; i < json.data.length; i++) {
    const newRow = table.insertRow();
    const cell1 = newRow.insertCell(0);
    const cell2 = newRow.insertCell(1);
    cell1.textContent = json.data[i].emp_name;
    const button = document.createElement('button');
    button.id = "testbutton" + i;
    button.textContent = "Click Me";
    button.addEventListener('click', doSmth);
    cell2.appendChild(button);
  }
}

function doSmth(event) {
  alert(event.target.id);
}

// Example JSON data
const json = { data: [{ emp_name: "John Doe" }, { emp_name: "Jane Smith" }] };
buildTable(json);

// Backend - Node.js (app.js)
const express = require('express');
const app = express();
app.use(express.static('public'));

app.get('/data', (req, res) => {
  const data = [
    { emp_name: "John Doe" },
    { emp_name: "Jane Smith" }
  ];
  res.json({ data });
});

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

// Frontend - index.html
<table id="mytesttable">
<thead>
<tr><th>Name</th><th>Action</th></tr>
</thead>
<tbody></tbody>
</table>

<script>
fetch('/data')
  .then(response => response.json())
  .then(json => buildTable(json));

function buildTable(json) {
  const table = document.getElementById("mytesttable").getElementsByTagName('tbody')[0];
  for (let i = 0; i < json.data.length; i++) {
    const newRow = table.insertRow();
    const cell1 = newRow.insertCell(0);
    const cell2 = newRow.insertCell(1);
    cell1.textContent = json.data[i].emp_name;
    const button = document.createElement('button');
    button.id = "testbutton" + i;
    button.textContent = "Click Me";
    button.addEventListener('click', doSmth);
    cell2.appendChild(button);
  }
}

function doSmth(event) {
  alert(event.target.id);
}
</script>

動的 ID の生成と JavaScript テーブルでの相互作用の強化

JavaScript を使用してテーブル コンテンツを動的に生成するときに見落とされがちな側面の 1 つは、スケーラビリティと保守性の可能性です。テーブルの行数が増加すると、特に DOM が常に更新または再構築されている場合、パフォーマンスに影響が出る可能性があります。パフォーマンスを最適化するには、ドキュメント フラグメントを DOM に追加する前に、最初にドキュメント フラグメントを使用してテーブル構造全体をメモリ内に構築することで、直接 DOM 操作の数を減らすことができます。これにより、大規模なアプリケーションの速度が低下する可能性があるリフローおよび再ペイントのプロセスが最小限に抑えられます。

動的テーブル生成におけるもう 1 つの重要な要素は、イベント委任をどのように処理するかです。各ボタンに個別のイベント リスナーを追加することは、小さなテーブルではうまく機能しますが、大きなデータセットではパフォーマンスの問題が発生する可能性があります。代わりに、イベント委任を使用すると、親要素 (テーブルなど) でイベントをリッスンし、ボタンのクリックをより効率的に処理できます。このようにして、テーブルにイベント リスナーを 1 つだけアタッチし、クリックされた要素の ID に基づいて、実行する適切なアクションを決定できます。

最後に、アクセシビリティも見逃せない要素です。ボタンやその他のインタラクティブな要素を動的に生成する場合、支援技術を使用しているユーザーを含むすべてのユーザーが各要素にアクセスできるようにすることが重要です。適当に追加することで aria-labels または 役割 ボタンを追加すると、より包括的なユーザー エクスペリエンスを提供できます。さらに、スクリーン リーダーやキーボード ナビゲーションを使用してテーブルをテストすると、より動的でアクセスしやすい Web アプリケーションで要素がどのように操作されるかに関する問題を明らかにするのに役立ちます。