jquery - 如何在现有数据表中添加新行作为 html-6ren

jquery - 如何在现有数据表中添加新行作为 html

转载作者：行者123 更新时间：2023-12-01 05:45:30

25

4

这是我根据我的要求创建的示例 html。基本上我想向现有数据表添加一个新行，其中数据表的源是 html dom 表。在添加新行时，我需要首先将其附加到 dom 表，并且应该使用该附加行重新初始化/新创建数据表。

<head>

<link type="text/css" rel="stylesheet" href="http://cdn.datatables.net/1.10.4/css/jquery.dataTables.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>

</head>

<body>
<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>

        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>

        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009/01/12</td>
                <td>$86,000</td>
            </tr>
            <tr>
                <td>Cedric Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2012/03/29</td>
                <td>$433,060</td>
            </tr>
        </tbody>
    </table>


</body>


<script>

$(document).ready(function() {

    var dt = $('#example').dataTable();


    $('#example tbody').append('<tr><td>bond</td><td>abc</td><td>xyz</td><td>22</td><td>2012/03/29</td><td>$433,060</td></tr>');

    dt.destroy();

    $('#example').dataTable();

}); 
</script>

最佳答案

我知道这篇 super 老的帖子，但如果有人仍在寻找答案，您可以轻松地通过以下方式完成:

最简单的方法是使用 rows.add 传递 html，用 jquery 包装并重新绘制表格

var dt = $('#example').dataTable();
var row = '<tr><td>bond</td><td>abc</td><td>xyz</td><td>22</td><td>2012/03/29</td><td>$433,060</td></tr>';
dt.rows.add($(row)).draw();

或者你做了什么，销毁表，追加你的html并再次重新初始化数据表(你只需先销毁数据表，然后追加)

var dt = $('#example').dataTable();
var row = '<tr><td>bond</td><td>abc</td><td>xyz</td><td>22</td><td>2012/03/29</td><td>$433,060</td></tr>';
dt.destroy();
$('#example tbody').append(row);
dt = $('#example').dataTable();

关于jquery - 如何在现有数据表中添加新行作为 html，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27139194/

25

4

0

文章推荐： java - Eclipse 和 GWT 调试问题

文章推荐： javascript - window.print() 不会在 iPAD 中弹出 PDF 打印对话框

文章推荐： python - 使用 gensim 将 LDA 应用于语料库进行训练

r - 现有 R 图中的子图
我有一个如下图所示的情节。对于这个情节，我想在情节(右下角或左下角)的某处添加类似的线图。我正在使用的子图的命令是 plot( 1:121, sample(1:121),type='l' ) 它绘制在
sql - 现有 SQL 数据库的规范化
我有一个单表数据库，我继承并迁移到 SQL Server，然后通过创建、链接和填充一大堆表示主表中项目的查找类型表来规范化它。我现在想用它们的外键替换原始表中的那些项目。我是不是一直在写一堆查询或 U
javascript - 在浏览器中编辑*现有* PDF
我有一个 Web 应用程序，它当前正在从服务器获取 PDF 的 base64 表示。我可以使用 Mozilla 的 pdf.js 在上显示它并使用下拉菜单切换页面。根据我所能找到的一切和Can
sql - 现有 DB2 列报告为不是表的列
在 DB2 上运行的 Moodle 2 安装中，删除用户不成功，返回从数据库读取错误: Debug info: [IBM][CLI Driver][DB2/LINUXX8664] SQL0206N "
grails - 现有 Controller 网址的HTTP状态404
我在grails项目的RH包中添加了一个名为Authorization的新域类。然后，我从grails菜单自动生成了 Controller 和 View 。但是当我尝试输入 Controller
plunker - 现有 Plunker 的副本
今天，我发现了一个有趣的plunker，经过谷歌大量搜索后一无所获，希望我能在这里找到答案。我只是想要那个笨蛋的副本。我不想使用复制和粘贴技术。有什么方法可以获取已建立的 plunk 的副本吗？我如何
ios - 现有 sqlite 数据库的核心数据
这个问题已经有答案了: 已关闭11 年前。 Possible Duplicate: Migrate normal sqlite3 database to core data? 是否可以将现有的 sql
java - 现有 list (构建错误)
我正在尝试在我的应用程序上添加启动画面。我干净地构建了程序，但我选择了错误的文件。现在我第二次编辑了 VM 选项并再次干净构建，现在我收到此错误: C:\Users\User\Documents\Ne
ios - 现有 CollectionView 图像在滚动时发生变化
我已经查看了很多问题，我不相信这是重复使用单元格的结果，因为新的单元格图像是正确的，但是现有的单元格图像不正确并且曾经是正确的。我会先发布图片，以便更容易理解问题。我有一个图像单元的 Collect
java - 现有 key 的哈希表为空
我在来自 Vaadin 的 ContainerHierarchicalWrapper 的这段代码中有一个非常奇怪的错误: for (Object object : children.keySet())
javascript - 现有 JavaScript 应用程序的国际化和本地化
到目前为止，我正在使用 Globalize用于我的 JavaScript 应用程序的 i18n 和 l10n(使用 jQuery UI 构建)。这行得通，但它将我的代码与另一个特定的库联系在一起。现在
现有 JHipster 项目中的 Elasticsearch
我正在创建一个 JHipster 应用程序，现在确定了 full text search 的必要性.我知道 JHipster 与 Elasticseach 集成，但我在创建项目时没有启用它。有没有一种
mysql - 现有 mysql 表或单独表中的附加字段
我一直在寻找堆栈中的建议，但我仍然不能 100% 确定改进它的最佳方法。我有一个存储大约 130K 条记录的 mysql INNODB“产品”表。杂项产品数据等大约有 80 个字段，然后我们一直在为每
c++ - 使用另一个(现有)对象创建新对象时会发生什么？
我在一本书上看到，它说:当我们使用另一个初始化新创建的对象时 - 使用复制构造函数创建一个临时对象，然后使用赋值运算符将值复制到新对象! 后来在书中我读到:当使用另一个对象初始化新对象时，编译器创建一
python - 现有 Django 项目中的语法错误
我第一次安装现有的 Django 项目时遇到了启动服务器 python manage.py runserver 的问题这是我做的 1.克隆仓库， 2.制作虚拟环境 3.pip安装要求.txt 4.生
html - 现有 linux 用户登录网站
我有一个网站，还有一个登录表单。我不想使用 PHP 来检查我的 MySQL 数据库，因此我正在寻找一种方法来检查用户凭据以查看是否已有 Linux 用户。我知道 PAM，但我还没有找到任何有关如何从网
c# - 现有 Umbraco 项目的开发
我有一个现有的 Umbraco 项目在 IIS 服务器上运行。当我开始这个项目时，我基本上是将 Umbraco 直接安装到服务器上，并通过管理界面进行编码，直到网站启动并上线。现在，客户想要一些更改
android - 现有 Android 虚拟设备列表为空
我是 Android 开发新手，目前正在学习一些教程。当我在 Eclipse 中设置一个新的 Android 项目，并选择 Windows -> Android SDK and AVD Manager
java - 有效(现有)电子邮件地址验证
我有这个注册页面可以正常工作，但对于电子邮件字段，我需要确保电子邮件正确有效1:正确2 : 有效为了正确添加电子邮件，我正在使用 Java 脚本验证来维护abc@def.com 很好用但我的问题是
c# - 现有 COM 引用或添加新引用时出错
首先让我说我不熟悉 COM 引用，并且我在 Windows 7 64 位计算机上使用 VS2010。今天早上，我从 TFS 中删除了一个现有项目。然后我尝试构建项目并收到此错误: The type o

首页

博学

6Ren·AI

商城

jquery - 如何在现有数据表中添加新行作为 html