javascript delete table

Selected rows in grid

With the popularity of web applications, JavaScript has become a widely used programming language. Of course, as web developers, we often need to process data in web applications. Deleting rows in a table is one of the functions. In this article, we will discuss how to delete selected rows in a table using JavaScript.

Step 1: HTML Markup

First, we need an HTML page containing a table. Create a table in HTML with the ID attribute "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>

Step 2: JavaScript Code

Next, we can use JavaScript to write logic to delete the selected rows in the table. We will use the following steps:

1. Create an array containing all selected rows.
2. Get the index of the selected row from the array and delete it.
3. Represent the updated form to the user.

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

Step 3: Let the user interact with the application

Finally, we need to provide the user with a delete button. We will use a button element and add a click event. When the button is clicked, we will call the deleteRows() function to delete the selected rows.

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

So far, we have completed how to delete selected rows in a table using JavaScript. We first get the table, iterate through all row elements and add a click event to each row element, and then we select or deselect rows based on the user's selection. Finally, use DOM operations to delete the selected rows to complete the row deletion operation.

Reference:

1. JavaScript to delete table rows, https://www.w3schools.com/jsref/met_table_deleterow.asp.
2. Creating and Modifying HTML Elements with JavaScript, https://www.digitalocean.com/community/tutorials/creating-and-modifying-html-elements-with-javascript

The above is the detailed content of javascript delete table. For more information, please follow other related articles on the PHP Chinese website!