IndexedDB 将按钮添加到要追加到的表的最后一列的最简单方法是什么？

d6kp6zgx 于 2022-12-09 发布在 IndexedDB

关注(0)|答案(2)|浏览(147)

我的代码中的这个片段使用一个函数从我的indexedDB数据库中获取数据并将其追加到一个表中。
接下来我需要做的是添加一个按钮来从列表和数据库中删除一个任务，我想通过在每一行任务的末尾添加一个按钮来实现这一点，该按钮可以通过ID选择任务，并将其从数据库中删除，这应该由表来反映。

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或未定义。

indexeddb

来源：https://stackoverflow.com/questions/65241622/what-is-the-easiest-way-of-adding-a-button-to-the-last-column-of-this-table-bein

2条答案

按热度按时间

2w2cym1i1#

“你好，索迪，"
也许在最后一个TD之前添加button HTML标记，或者在同一TR内的一个单独的TD中添加更好。然后，您可以使用button 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);
    }

赞(0）回复(0）举报 2022-12-09

js81xvg62#

添加按钮的答案在上面，由于问题偏离主题，因此将关闭此答案。

赞(0）回复(0）举报 2022-12-09