为啥要在标题和正文中添加表格数据？

Posted 2023-05-09

【中文标题】为啥要在标题和正文中添加表格数据？

【英文标题】：Why is the table data being added to the heading and the body?为什么要在标题和正文中添加表格数据？

【发布时间】：2021-03-23 03:40:03

【问题描述】：

我一直在为一项任务编写待办事项列表网络应用程序，并且到目前为止一直在使用此代码：

const db = new Database();

document.addEventListener("DOMContentLoaded", function(event) 
    setTimeout(function() 
      db.getAllTodos(function(records) 
          records.forEach(function() 
            console.log(records.length);
            var cols = ['taskName','taskDesc', 'taskDate','taskTime','taskPriority','taskLocation','taskImage'];
              for (var i = 0; i <= records.length; i++)
                $('table').append('<tr></tr>' );
                for (var j = 0; j < cols.length; j++) 
                  var lastCell = $('table tr:last-child');
                  lastCell.append ('<td>' + records[i][cols[j]] + '</td>' );
                
                  lastCell.append("<td class=\"delete\"><button  onclick=\"deleteTask()\">Delete</button><button onclick=\"editTask()\">Edit</button></td>");
              
            )
      );
    , 1000);
);

到目前为止，这一切都很好，但现在我正在尝试使用 DataTables 添加对数据进行排序的功能，数据被添加到表的标题和正文中，我不知道出为什么。如果我删除用于初始化 DataTable 的代码，问题仍然存在。

Image showing the table with datatable being used

Image showing the table without datatable being used

从昨天开始，我一直在研究这个并查看 chrome 调试工具，但我一无所获，代码与以前完全相同，我什至从我以前保存的文件中复制粘贴了它，同样的问题持续存在。相反，我认为这可能与使用 DataTables 网站上的 JQuery 导入链接有关，所以我再次使用标准 JQuery 进行了测试，结果完全一样。非常感谢任何建议，谢谢！

【问题讨论】：

在您添加 DataTables 之前它一直有效，但是当您删除 DataTables 时它不起作用？我认为我们需要一个更具体的问题，而不是它不起作用。有什么具体错误吗？

没有错误，除了以前存在的错误似乎没有引起任何问题。几乎在我尝试使用数据表之前，它工作得很好，但现在我正在使用它，它现在将所有数据附加两次。我删除了初始化数据表的一段代码，它继续被破坏，所以我不确定它发生了什么。我链接的 2 个屏幕截图显示了正在发生的事情。

【参考方案1】：

问题出在标签上。我不知道为什么，但删除它们已经解决了数据附加的问题。最后我也决定完全不使用数据表，因为它与我已经编写的代码的兼容性不是很好。