如何使用JavaScript DOM向表格添加行？

2025-03-4 云资源网 前端开发教程 已收录 关注 24次
当前位置：云资源网 > 技术教程 > 前端开发教程 > 如何使用JavaScript DOM向表格添加行？
正文概述

我们将学习如何使用JavaScript dom向表格中添加一行。为了实现这个目标，我们有多种方法。其中一些如下：

  • 使用 insertRow() 方法

  • 通过创建新元素

使用 insertRow() 方法

使用insertRow()方法可以在表格的开头插入新行。它创建一个新的a34de1251f0d9fe1e645927f19a896e8元素并将其插入到表格中。它接受一个数字作为参数，指定表格的位置。如果我们不传递任何参数，则在表格的开头插入行。如果您想在表格的最后插入行，则将-1作为参数传递。

语法

table.insertRow(index)

返回值 − 被插入的元素。

正如我们所知，一个合适的表格不仅有表格行（<tr>），还有被称为表格单元格的表格文档（<td>）。为了在行内插入单元格，我们使用insertCell()方法。它在表格行内创建一个<td>元素。它接受一个数字作为参数，指定该行内单元格的索引。

语法

下面是插入单元格的语法：

table.insertCell(index)

返回值 − 被插入的元素。

将一行添加到表格的步骤

  • 获取数据表元素。

  • 使用insertRow方法创建一行，并将其插入到表格中。

  • 使用insertCell方法创建新的单元格，并将其插入到您创建的行中。

  • 向新创建的单元格中添加数据。

Example

的翻译为：

示例

在此示例中，我们有一个包含学生姓名及其年龄的表。我们将在表格末尾添加一名新学生。

<!DOCTYPE html>
<html>
<head>
   <title> Example- add rows to a table using JavaScript DOM </title>
   <style>
      table,
      td,
      th {
         border: 1px solid black;
      }
   </style>
</head>
<body>
   <h2> Adding rows to a table using JavaScript DOM </h2>
   <p> Click on the button to add the row to the table </p>
   <button id="btn" onclick="addRow()"> Click me </button>
   <br><br>
   <table id="myTable">
      <thead>
         <th> Name </th>
         <th> Age </th>
         <th> City </th>
      </thead>
      <tbody>
         <tr>
            <td> Alex </td>
            <td> 20 </td>
            <td> New York </td>
         </tr>
         <tr>
            <td> Tim </td>
            <td> 18 </td>
            <td> Boston </td>
         </tr>
         <tr>
            <td> Mark </td>
            <td> 23 </td>
            <td> San Diego </td>
         </tr>
      </tbody>
   </table>
</body>
<script>
   function addRow() {
      // Get the table element in which you want to add row
      let table = document.getElementById("myTable");
   
      // Create a row using the inserRow() method and
      // specify the index where you want to add the row
      let row = table.insertRow(-1); // We are adding at the end
   
      // Create table cells
      let c1 = row.insertCell(0);
      let c2 = row.insertCell(1);
      let c3 = row.insertCell(2);
   
      // Add data to c1 and c2
      c1.innerText = "Elon"
      c2.innerText = 45
      c3.innerText = "Houston"
   }
</script>
</html>

通过创建新元素

在这种方法中，我们将使用document.createElement()方法创建新的行和列。

方法

以下是通过创建元素向表格添加行的步骤。

  • 获取要添加行的表体元素

  • 创建行元素

  • 创建单元格将数据插入单元格

  • 将单元格添加到行中

  • 追加行到表格主体

Example

的翻译为：

示例

<html>
<head>
   <title> Example- add rows to a table using JavaScript DOM </title>
   <style>
      table,
      td,
      th {
         border: 1px solid black;
      }
   </style>
</head>

<body>
   <h2> Adding rows to a table using JavaScript DOM </h2>
   <p>Click on the button to add the row to the table </p>
   <button id="btn" onclick="addRow()"> Click me </button>
   <br><br>
   <table id="myTable">
      <thead>
         <th> Name </th>
         <th> Age </th>
         <th> City </th>
         <th> Course </th>
      </thead>
      <tbody id="tableBody">
         <tr>
            <td> Alex </td>
            <td> 20 </td>
            <td> New York </td>
            <td> Java </td>
         </tr>
         <tr>
            <td> Tim </td>
            <td> 18 </td>
            <td> Boston </td>
            <td> Python </td>
         </tr>
         <tr>
            <td> Mark </td>
            <td> 23 </td>
            <td> San Diego </td>
            <td> JavaScript </td>
         </tr>
      </tbody>
   </table>
</body>
<script>
   function addRow() {
      // Get the table body element in which you want to add row
      let table = document.getElementById("tableBody");
   
      // Create row element
      let row = document.createElement("tr")
      
      // Create cells
      let c1 = document.createElement("td")
      let c2 = document.createElement("td")
      let c3 = document.createElement("td")
      let c4 = document.createElement("td")
      
      // Insert data to cells
      c1.innerText = "Elon"
      c2.innerText = "42"
      c3.innerText = "Houston"
      c4.innerText = "C++"
      
      // Append cells to row
      row.appendChild(c1);
      row.appendChild(c2);
      row.appendChild(c3);
      row.appendChild(c4);
      
      // Append row to table body
      table.appendChild(row)
   }
</script>
</html>

以上就是如何使用JavaScript DOM向表格添加行？的详细内容，更多请关注双恒网络其它相关文章！

1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请联系管理员！
8. 精力有限，不少源码未能详细测试（解密），不能分辨部分源码是病毒还是误报，所以没有进行任何修改，大家使用前请进行甄别
9.本站默认解压密码为:www.sudo1.com
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的。
不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。
如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。
我们非常重视版权问题，如有侵权请邮件与我们联系处理。敬请谅解！

云资源网 » 如何使用JavaScript DOM向表格添加行？

常见问题FAQ

免费下载或者VIP会员专享资源能否直接商用？
本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
提示下载完但解压或打开不了？
最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量，若小于网盘提示的容量则是这个原因。这是浏览器下载的bug，建议用百度网盘软件或迅雷下载。 若排除这种情况，可在对应资源底部留言，或 联络我们.。
你们有qq群吗怎么加入？
当然有的，如果你是帝国cms、易优cms、和pbootcms系统的爱好者你可以加入我们的QQ千人交流群https://www.sudo1.com/page-qun.html。

云资源网 钻石

喜欢 0
分享到：

相关推荐

  • 会员数(个)
  • 12275资源数(个)
    •        
  • 资源(G)
    •        
  • 今日下载
  • 1365稳定运行(天)

提供最优质的资源集合

立即查看 了解详情