자바스크립트 삭제 테이블

그리드에서 선택한 행

웹 애플리케이션의 인기로 인해 JavaScript는 널리 사용되는 프로그래밍 언어가 되었습니다. 물론 웹 개발자로서 우리는 웹 애플리케이션에서 데이터를 처리해야 하는 경우가 많습니다. 테이블의 행을 삭제하는 것은 기능 중 하나입니다. 이 기사에서는 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를 사용하여 테이블에서 선택한 행을 삭제하는 논리를 작성할 수 있습니다. 다음 단계를 사용합니다.

1. 선택한 모든 행을 포함하는 배열을 만듭니다.
2. 배열에서 선택한 행의 인덱스를 가져와 삭제합니다.
3. 업데이트된 테이블을 사용자에게 표시합니다.

//获取表格元素
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단계: 사용자가 애플리케이션과 상호작용하도록 합니다.

마지막으로 사용자에게 삭제 버튼을 제공해야 합니다. 버튼 요소를 사용하고 클릭 이벤트를 추가하겠습니다. 버튼을 클릭하면 deleteRows() 함수를 호출하여 선택한 행을 삭제합니다.

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

이제 JavaScript를 사용하여 테이블에서 선택한 행을 삭제하는 방법을 완료했습니다. 먼저 테이블을 가져와 모든 행 요소를 반복하고 각 행 요소에 클릭 이벤트를 추가한 다음 사용자의 선택에 따라 행을 선택하거나 선택 취소합니다. 마지막으로 DOM 작업을 사용하여 선택한 행을 삭제하여 행 삭제 작업을 완료합니다.

참조:

1. 테이블 행을 삭제하는 JavaScript, https://www.w3schools.com/jsref/met_table_deleterow.asp.
2. JavaScript로 HTML 요소 생성 및 수정, https://www.digitalocean.com/community/tutorials/creating-and-modifying-html-elements-with-javascript

위 내용은 자바스크립트 삭제 테이블의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!