javascript padam jadual

Baris yang dipilih dalam grid

Dengan populariti aplikasi web, JavaScript telah menjadi bahasa pengaturcaraan yang digunakan secara meluas. Sudah tentu, sebagai pembangun web, kita sering perlu memproses data dalam aplikasi web. Memadam baris dalam jadual adalah salah satu fungsi. Dalam artikel ini, kita akan membincangkan cara memadamkan baris yang dipilih dalam jadual menggunakan JavaScript.

Langkah 1: Penanda HTML

Pertama, kita memerlukan halaman HTML yang mengandungi jadual. Cipta jadual dalam HTML dengan atribut ID "table-data".

<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>

Langkah 2: Kod JavaScript

Seterusnya, kita boleh menggunakan JavaScript untuk menulis logik untuk memadamkan baris yang dipilih dalam jadual. Kami akan menggunakan langkah berikut:

1. Buat tatasusunan yang mengandungi semua baris yang dipilih.
2. Dapatkan indeks baris yang dipilih daripada tatasusunan dan padamkannya.
3. Wakilkan jadual yang dikemas kini kepada pengguna.

//获取表格元素
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);

Langkah 3: Biarkan pengguna berinteraksi dengan aplikasi

Akhir sekali, kami perlu memberikan pengguna butang padam. Kami akan menggunakan elemen butang dan menambah acara klik. Apabila butang diklik, kami akan memanggil fungsi deleteRows() untuk memadam baris yang dipilih.

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

Pada ketika ini, kami telah menyelesaikan cara memadamkan baris yang dipilih dalam jadual menggunakan JavaScript. Kami mula-mula mendapatkan jadual, mengulangi semua elemen baris dan menambah acara klik pada setiap elemen baris, dan kemudian kami memilih atau menyahpilih baris berdasarkan pilihan pengguna. Akhir sekali, gunakan operasi DOM untuk memadamkan baris yang dipilih untuk melengkapkan operasi pemadaman baris.

Rujukan:

1. JavaScript untuk memadamkan baris jadual, https://www.w3schools.com/jsref/met_table_deleterow.asp.
2. Mencipta dan Mengubah Suai Elemen HTML dengan JavaScript, https://www.digitalocean.com/community/tutorials/creating-and-modifying-html-elements-with-javascript

Atas ialah kandungan terperinci javascript padam jadual. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!