JavaScriptのテーブル削除-フロントエンドQ&A-php.cn

JavaScriptのテーブル削除

WBOY

リリース： 2023-05-21 09:48:06

オリジナル

498 人が閲覧しました

グリッド内の選択された行

Web アプリケーションの人気に伴い、JavaScript は広く使用されるプログラミング言語になりました。もちろん、Web 開発者として、Web アプリケーションでデータを処理する必要があることがよくあります。テーブル内の行の削除は機能の 1 つです。この記事では、JavaScript を使用してテーブル内の選択した行を削除する方法について説明します。

ステップ 1: HTML マークアップ

まず、表を含む HTML ページが必要です。 ID 属性「table-data」を使用して HTML でテーブルを作成します。

<table id="table-data">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Gender</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>25</td>
      <td>Male</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>22</td>
      <td>Female</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>30</td>
      <td>Male</td>
    </tr>
  </tbody>
</table>

ログイン後にコピー

ステップ 2: JavaScript コード

次に、JavaScript を使用して、テーブル内の選択された行を削除するロジックを作成できます。次の手順を使用します。

選択したすべての行を含む配列を作成します。
選択した行のインデックスを配列から取得し、削除します。
更新されたフォームをユーザーに提示します。

//获取表格元素
const table = document.getElementById('table-data');

//获取所有表格行
const rows = table.getElementsByTagName('tr');

//保存选定的行
let selected_rows = [];

//将选定的行添加到数组中
function selectRow(row) {
  selected_rows.push(row);
}

//将选定的行从数组中移除
function deselectRow(row) {
  const index = selected_rows.indexOf(row);
  if (index > -1) {
    selected_rows.splice(index, 1);
  }
}

//在单击表格行时调用
function handleClick(event) {
  const row = event.target.parentNode;
  if (row.nodeName === 'TR') {
    if (row.getAttribute('data-selected') === 'true') {
      row.setAttribute('data-selected', 'false');
      deselectRow(row);
    } else {
      row.setAttribute('data-selected', 'true');
      selectRow(row);
    }
  }
}

//为表格行添加单击事件
for (let i = 0; i < rows.length; i++) {
  rows[i].addEventListener('click', handleClick, false);
}

//删除选定的行并重新呈现表格
function deleteRows() {
  for (let i = 0; i < selected_rows.length; i++) {
    const index = selected_rows[i].rowIndex;
    table.deleteRow(index);
  }
  selected_rows = [];
}

//获取删除按钮元素并添加单击事件
const delete_button = document.getElementById('delete-button');
delete_button.addEventListener('click', deleteRows, false);

ログイン後にコピー

ステップ 3: ユーザーにアプリケーションを操作させる

最後に、ユーザーに削除ボタンを提供する必要があります。 button要素を使用し、クリックイベントを追加します。ボタンをクリックすると、deleteRows() 関数を呼び出して、選択した行を削除します。

<button id="delete-button">Delete Rows</button>

ログイン後にコピー

これまで、JavaScript を使用してテーブル内の選択した行を削除する方法を完了しました。まずテーブルを取得し、すべての行要素を反復処理し、各行要素にクリックイベントを追加してから、ユーザーの選択に基づいて行を選択または選択解除します。最後に、DOM 操作を使用して選択した行を削除し、行の削除操作を完了します。

参考:

テーブルの行を削除するための JavaScript (https://www.w3schools.com/jsref/met_table_deleterow.asp)。
JavaScript を使用した HTML 要素の作成と変更、https://www.digitalocean.com/community/tutorials/creating-and-modifying-html-elements-with-javascript

以上がJavaScriptのテーブル削除の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。