자바스크립트 테이블에 행 추가

웹 개발에서 테이블은 공통 요소입니다. 테이블을 사용하여 데이터 표시, 데이터 분석 및 시각화 등을 수행할 수 있습니다. 데이터가 동적으로 변경되면 테이블에 새로운 데이터 행을 계속 추가해야 할 수도 있습니다. JavaScript에서는 다음과 같은 방법으로 테이블 행을 동적으로 추가할 수 있습니다.

준비

테이블 행을 추가하는 JavaScript 코드 작성을 시작하기 전에 HTML 파일에서 테이블의 기본 구조를 정의해야 합니다. 예:

<table id="myTable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>25</td>
      <td>New York</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>30</td>
      <td>Los Angeles</td>
    </tr>
  </tbody>
</table>

이 예에서는 두 개의 테이블 행이 포함된 테이블을 정의하고 id 속성을 ​​할당하여 JavaScript에서 해당 테이블 요소를 가져옵니다. id 属性，用来在JavaScript中获取对应的表格元素。

通过DOM操作增加表格行

我们可以通过DOM操作来增加表格行。具体来说，我们需要先获取到表格元素，然后创建一个表格行元素，并将该行添加到表格的 tbody 元素中。

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

// 创建新的表格行
const newRow = document.createElement('tr');

// 创建新的表格单元格并添加文本内容
const nameCell = document.createElement('td');
nameCell.textContent = 'Tom';
newRow.appendChild(nameCell);

const ageCell = document.createElement('td');
ageCell.textContent = '35';
newRow.appendChild(ageCell);

const cityCell = document.createElement('td');
cityCell.textContent = 'Chicago';
newRow.appendChild(cityCell);

// 将新的行添加到表格中
const tbody = table.getElementsByTagName('tbody')[0];
tbody.appendChild(newRow);

在这个例子中，我们首先获取了ID为 myTable 的表格元素，然后创建了一个新的表格行元素，并为这一行中的每个单元格添加了文本内容。最后，我们获取了表格的 tbody 元素，并将新的表格行添加到其中。

使用innerHTML增加表格行

除了通过DOM操作来增加表格行外，还可以使用 innerHTML 属性快速地增加一行表格数据。具体来说，我们可以将新的表格行数据写入一个HTML字符串中，然后将该字符串赋值给表格的 innerHTML 属性。

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

// 定义新的表格行HTML字符串
const newRowHtml = '<tr><td>Tom</td><td>35</td><td>Chicago</td></tr>';

// 将HTML字符串添加到表格中
const tbody = table.getElementsByTagName('tbody')[0];
tbody.innerHTML += newRowHtml;

在这个例子中，我们先获取了ID为 myTable 的表格元素，然后定义了一个新的表格行HTML字符串。最后，我们获取了表格的 tbody 元素，并将表格行的HTML字符串添加到其中。

结论

在JavaScript中，我们可以通过DOM操作或 innerHTML

DOM 작업을 통해 테이블 ​​행 추가🎜🎜DOM 작업을 통해 테이블 ​​행을 추가할 수 있습니다. 특히, 먼저 테이블 요소를 가져온 다음 테이블 행 요소를 생성하고 해당 행을 테이블의 tbody 요소에 추가해야 합니다. 🎜rrreee🎜이 예에서는 먼저 ID가 myTable인 테이블 요소를 가져온 다음 새 테이블 행 요소를 만들고 이 행의 각 셀에 텍스트 콘텐츠를 추가합니다. 마지막으로 테이블의 tbody 요소를 가져와서 여기에 새 테이블 행을 추가합니다. 🎜🎜innerHTML을 사용하여 테이블 행 추가🎜🎜DOM 작업을 통해 테이블 ​​행을 추가하는 것 외에도 innerHTML 속성을 ​​사용하여 테이블 데이터 행을 빠르게 추가할 수도 있습니다. 특히 새 테이블 행 데이터를 HTML 문자열에 쓴 다음 해당 문자열을 테이블의 innerHTML 속성에 할당할 수 있습니다. 🎜rrreee🎜이 예에서는 먼저 ID가 myTable인 테이블 요소를 가져온 다음 새 테이블 행 HTML 문자열을 정의합니다. 마지막으로 테이블의 tbody 요소를 가져와 테이블 행의 HTML 문자열을 여기에 추가합니다. 🎜🎜결론🎜🎜JavaScript에서는 DOM 작업이나 innerHTML 속성을 ​​통해 테이블 ​​행을 추가할 수 있습니다. 실제 개발에서는 특정 상황에 따라 이러한 방법 중 하나를 선택해야 합니다. 어떤 방법을 사용하든 먼저 테이블 요소를 가져와 테이블의 HTML 구조와 데이터 형식이 올바른지 확인해야 합니다. 테이블의 구조와 데이터를 정기적으로 확인하면 코드 오류와 데이터 오류를 방지할 수 있습니다. 🎜

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