JavaScript -使用AppendChild()向表格添加新行

基础概念

appendChild() 是 JavaScript 中的一个 DOM（文档对象模型）方法，用于将一个节点添加到指定父节点的子节点列表的末尾。在表格中使用 appendChild() 可以动态地向表格添加新的行（<tr> 元素）。

类型

HTML 表格：使用 <table>、<tr>、<td> 等元素创建的表格。
JavaScript 操作：通过 JavaScript 代码动态操作 DOM 元素。

应用场景

数据动态更新：当需要从服务器获取数据并显示在表格中时。
用户交互：当用户执行某些操作（如添加记录、删除记录）时，需要更新表格内容。

示例代码

以下是一个简单的示例，展示如何使用 appendChild() 向表格添加新行：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Append Row to Table</title>
</head>
<body>
    <table id="myTable" border="1">
        <tr>
            <th>Name</th>
            <th>Age</th>
        </tr>
        <tr>
            <td>John</td>
            <td>25</td>
        </tr>
    </table>
    <button onclick="addRow()">Add Row</button>

    <script>
        function addRow() {
            // 获取表格元素
            var table = document.getElementById("myTable");

            // 创建新行
            var newRow = document.createElement("tr");

            // 创建新单元格
            var cell1 = document.createElement("td");
            var cell2 = document.createElement("td");

            // 设置单元格内容
            cell1.innerHTML = "Alice";
            cell2.innerHTML = "30";

            // 将单元格添加到新行
            newRow.appendChild(cell1);
            newRow.appendChild(cell2);

            // 将新行添加到表格
            table.appendChild(newRow);
        }
    </script>
</body>
</html>

常见问题及解决方法

问题：新行没有正确添加到表格中

原因：

选择器错误：可能没有正确选择到表格元素。
DOM 操作顺序：可能在表格元素还未完全加载时就尝试操作 DOM。

解决方法：

确保选择器正确，可以通过 console.log() 打印选择的元素来验证。
将 JavaScript 代码放在 window.onload 事件中，确保 DOM 完全加载后再执行操作。

window.onload = function() {
    // 你的代码
};

问题：新行添加后，表格样式错乱

原因：

单元格合并问题：新行的单元格可能没有正确合并。
CSS 样式问题：新行可能没有继承或应用正确的 CSS 样式。

解决方法：

确保新行的单元格合并设置正确。
检查并调整 CSS 样式，确保新行能够正确应用样式。

参考链接

通过以上信息，你应该能够理解如何使用 appendChild() 向表格添加新行，并解决一些常见问题。

相关·内容

DOM

javascript dom学习笔记

http://blog.csdn.net/zhoulenihao/article/details/11099455

JavaScript---网络编程(9-1)--DHTML技术演示(2-1)-表格创建的几种方式

一：用最底层的方式，该方式用来创建别的对象树也可以代码演示： <html> <head> <title>DHTML技术演示---表格创建--用最底层的方式，其实该方式用来创建别的对象树也可以</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style type="text/css"> table{ border:#ff80ff;

3-DOM

将标记语言文档（HTML,XML…）的各个部分，封装为对象，可以使用这些对象，对标记语言文档进行CRUD动态操作

JS-DOM 综合练习-动态添加删除班级成绩表

费了2个小时，才把原理弄懂，把问题逐个解决，当你发现你最后栽的那个点，是一个小石头拌的你，你起来是该哭还是该笑呢？只怪自己习武不精吧。虽然问题都解决了，但是还有一个余留的问题就是鼠标经过input时，怎么修改背景颜色的问题。这一节有点乱，虽然整理的代码编了问题序号。可我相信，再过几天自己回头看肯定还是一头雾水。 so,附上具体问题网址：http://www.imooc.com/code/1636 以下是html整件 <!DOCTYPE html> <html> <head> <meta chars

JavaScript web编程

在实际开发中有些东西并不是静态的，要随着改变，比如表格内容，有些资料是从后台数据库中获取的，以上就是用js制作的一个表格案例，更加的灵活。效果图如下：

JavaScript DOM操作表格及样式

一．操作表格

标签是HTML中结构最为复杂的一个，可以通过DOM来创建生成它（比较麻烦），或者HTML DOM来操作它。 //需要操作的table

<tr

010

节点操作

网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM 中，节点使用 node 来表示。

js怎么让指定方法先后顺序_jquery固定table表头

当时遇见这个问题是医院手麻系统大批量数据展示，由于是旧项目系统没有使用到前端的架构只能使用JQ,JS, css完成也谢谢给予我支持的同行们

JavaScript之Dom、事件，案例

📦个人主页：楠慧 🏆简介：一个大二的科班出身的，主要研究Java后端开发 ⏰座右铭：成功之前我们要做应该做的事情，成功之后才能做我们喜欢的事 3、JavaScript DOM 3.1、DOM介绍 DOM(Document Object Model)：文档对象模型。将 HTML 文档的各个组成部分，封装为对象。借助这些对象，可以对 HTML 文档进行增删改查的动态操作。 📷 3.2、Element元素的获取操作具体方法 📷 代码实现 <!DOCTYPE html> <html lang=

JS的常用操作

用户在进行注册的时候会输入一些内容，但是有些用户会输入一些不合法的内容，这样会导致服务器的压力过大，此时我们需要对用户输入的内容进行一个校验(前端校验和后台校验)，前端校验防君子不防小人。

节点操作

node.removeChild() 方法从 node节点中删除一个子节点，返回删除的节点。

三峡大学复杂数据预处理day01-day03

计划安排见：【腾讯文档】三峡大学文档资源主要内容：WEB端三剑客HTML+CSS+JavaScript 实验网址：Java爬虫框架WebMagic

抛开插件，你真的懂拖动怎么实现吗？

回到正题，本章将分享一些关于 Javascript 中拖动的内容，探索拖动过程的奥秘。👏

HTML5+CSS3+JavaScript从入门到精通-20

HTML5+CSS3+JavaScript从入门到精通作者：王征，李晓波第二十章 JavaScript的DOM编程案例 20-01 HTML文档的节点属性 <!DOCTYPE html> <ht

浏览器如何读取本地Excel文档

浏览器可以读取Excel表格数据吗？答案是否定的，目前主流浏览器都无法打开本地Excel文档。答案也是肯定的，这就来看看具体实现方法！！！

模仿一个在线表格

展示地址：https://gethtml.cn/project/2020/04/19/index.html

04_使用JS完成功能

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/100785.html原文链接：https://javaforall.cn

JavaWeb——JavaScript精讲之DOM、BOM对象与案例实战（动态添加删除表格）

上一博文种讲解了JavaScript基础的ECMAScript，包括基本语法和部分对象，本文中继续讲解JavaScript中比较重要的两部分内容BOM、DOM及事件，后文中有对应的实战练习。

如何在前端应用中合并多个 Excel 工作簿

SpreadJS是纯前端的电子表格控件，可以轻松加载 Excel 工作簿中的数据并将它们呈现在前端浏览器应用的网页上。

Web-第三天 JavaScript学习【悟空教程】

用户在提交表单时，需要对用户的填写的数据进行校验。本案例只对用户名、密码、确认密码和邮箱进行校验。

3.4 js生成报表

如下函数示意在ID为tbHost的元素内追加一个表格：假设nodes为二维数组，遍历其所有行和列，将其元素的Ap属性以二维表格的形式显式出来。通过该函数可以直观观察到二维数组的内容。

如果你要学JS——我正走在JS的路上（七）

使用node.removeChild()方法从DOM中删除一个子节点,返回删除的节点。

关于后端代码的总结_辐射4最强防具代码

JavaScript 是脚本语言，是一种解释性脚本语言(代码不进行预编译) JavaScript 是一种轻量级的编程语言。 JavaScript 是可插入 HTML 页面的编程代码 JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行 JavaScript 很容易入门

JavaScript中动态生成表格

行：<input type="text" id="row" value="5">

第85节：Java中的JavaScript

后代选择器：选择器1 选择器2 子元素选择器：选择器1 > 选择器2 选择器分组：选择器1，选择器2，选择器3{} 属性选择器：选择器[属性名称='属性值']

第3章 WEB03- JS篇-视频教程-第二部分

在注册页面上有一个下拉列表,下拉列表显示省份信息,有另一个下列列表.选择某个省份，将这个省份下的城市列出.

jsp+ajax_javascriptjavascript日

明后两天梁言兵老师来讲Ajax及其最近作过的一个真实的Ajax项目，所以，我今天讲解梁老师的课程所需要的一些前置知识。因为大家对Javascript不是很熟悉，所以我首先讲解Javascript的DHTML功能。本来入学考试要求大家很好地掌握Javascript的，但是大家都不能理解我们的苦衷，并没有专心去对待Javascript。想想我前两年强调javascript和css的重要性时，一些培训中心的人居然对此不屑一顾，当他们咨询学员时，也以此来攻击我，学员们也对这些培训中心的蛊惑深信不疑！随着Ajax的流行，这些人又跟风觉得Javascript重要了，现在同学们应该能静下心来去好好学习Javascript了。通过DHTML和Javascript可以实现网页显示的局部更新，先用一个动态生成表格内容的Javascript来讲解，两种方式：表格专用的数据模型来实现： <Script language=javaScript> function LianJie() { //selValue=mainTab.rows[0].cells[0].childNodes[0].innerText; //selValue=window.sel.innerText selValue=window.sel.options[window.sel.selectedIndex].text texValue=window.text1.value; innValue=selValue+texValue; newRow=window.mainTab[1].insertRow() alert(newRow); newCell=newRow.insertCell() newCell.innerText=innValue; } </Script>

人员表
姓名	性别	年龄
汤高	男	20

<select style=”width:200px;” id=”sel” Name=”sel”> <option>sdfsdfsdfdsfsdf</option> <option>1111111111111</option> <option>222222222222</option> </select>

通过标准的DOM对象模型来实现： <html> <head> <title>MyHtml.html</title> <meta http-equiv=”keywords” content=”keyword1,keyword2,keyword3″> <meta http-equiv=”description” content=”this is my page”> <meta http-equiv=”content-type” content=”text/html; charset=UTF-8″> <!–<link rel=”stylesheet” type=”text/css” href=”./styles.css”>–> <SCRIPT type=”text/javascript”> function addRow() { alert(“hehe”); var tbody = document.createElement(“tbody”); var tr = document.createElement(“tr”); var td = document.createElement(“td”); var value = document.createTextNode(“1111”); td.appendChild(value); tr.appendChild(td); tbody.appendChild(tr); document.getElementById(“t1”).appendChild(tbody); //background=”