将按钮添加到此表的最后一列的最简单方法是什么？答案

【问题标题】：What is the easiest way of adding a button to the last column of this table being appended to?将按钮添加到此表的最后一列的最简单方法是什么？
【发布时间】：2020-12-10 20:11:13
【问题描述】：

我的代码中的这个 sn-p 使用一个函数从我的 indexedDB 数据库中获取数据并将其附加到表中。

接下来我需要做的是添加一个按钮来从列表和数据库中删除一个任务它来自应该由表反映的数据库。

 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++) {
                  $('table tr:last-child').append ('<td>' + records[i][cols[j]] + '</td>' ); 
                }
              }
            })
      });
    }, 1000);
});

以下是我的网页和数据库的一些图片供参考： https://imgur.com/a/5h6qMMJ

我想通过将按钮作为数据添加到数据库中来做到这一点，但是当我尝试将其放入时它总是显示为 null 或未定义。

【问题讨论】：

标签： javascript indexeddb

【解决方案1】：

嗨，SourOddity，

也许在最后一个 TD 之前添加按钮 HTML 标记，或者在同一个 TR 内的单独 TD 中添加更好的 HTML 标记将是这种情况下的诀窍。然后，您可以使用按钮 ID 在其上调用 click 事件，以运行您的删除功能。我当然希望这会有所帮助！

$('table tr:last-child').append ('<td>' + records[i][cols[j]] + '</td>' + "</td><button id='delbtn' type='button'>Delete</button></td>");

我对代码做了一些修改，现在看起来像这样：

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></td>");
              }
            })
      });
    }, 1000);
});

function deleteTask() {
  console.log("working");
}

这个解决方案可以添加按钮，但是我现在明白了 this error:

提到但在 database.js 中不可见的代码行

async getAllTodos(callback) {
        let store = this.database.transaction(["taskList"], "readonly").objectStore("taskList");
        let allRecords = store.getAll();
 
        allRecords.onsuccess = () => callback(allRecords.result);
    }

【讨论】：

您是否检查过记录属性 taskName 是否像阵列上那样出现？另外，在尝试打印此数据之前，我不确定记录是否仍在填充过程中，我的意思是，如果记录长度大于 0，我将首先使用条件来确定，这意味着它有一些数据。也许在运行脚本的那一刻，这个数组仍然是空的或者甚至没有创建（见未定义），因此找不到 taskName 属性。
我真的不确定，一步一步地进行看起来很好，就像循环在填充数据或其他东西后试图继续。
是的，这很奇怪，可能其中一些原因导致阵列的数据传输延迟，但我无法用你的代码达到那么多，但至少我们尝试了按钮的部分和现在正在工作，我很高兴我至少能够帮助一些事情。问候！

【解决方案2】：

添加按钮的答案在上面，当问题离开主题时将关闭这个。

【讨论】：