如何从indexeddb检索数据并在div中显示

时间:2016-12-08 18:02:29

标签: javascript jquery html css

我创建了一个函数readAll(),它将数据提取到todos div中,但它没有显示click函数的数据,但它不是工作数据在索引db中成功添加但是它没有显示。现在我首先要清空表格,然后将数据附加到javascript中的html中。

function readAll() {
  var objectStore = db.transaction("todostore").objectStore("todostore");
  $("#todos").empty();
  objectStore.openCursor().onsuccess = function(event) {
   var cursor = event.target.result;
   if (cursor) {
    $("#todos").append("<tr><td>" + cursor.key + "</td><td>" + cursor.value.todo + "</td><td><button onclick=\"update('" + cursor.key + "','" + cursor.value.todo + "')\">Update</button></td><td><button onclick=\"removetodo('" + cursor.key + "','" + cursor.value.todo + "')\">Delete</button></td></tr>");
    cursor.continue();
  }
 };
};

现在我正在点击我正在调用readAll函数

的函数
$(".clickme").click(function(){
  readAll();
}); 

我在div中创建了一个div视图div我现在使用了一个表头我只是从JavaScript中附加代码并填充到html中

<div id="view">
 <thead>
   <tr class="ui-bar-d">
     <th data-priority="2">Timestamp</th>
     <th data-priority="1">To Do</th>
     <th data-priority="3">Update</th>
     <th data-priority="4">Delete</th>
   </tr>
 </thead>
 <tbody id="todos">
 </tbody>
</table>
</div>
<label for="todo">To Do:</label>
<input id="todo" type="text">
<input id="toprice" type="text">
<button class="clickme">clickme</button>
<button class="ui-shadow ui-btn ui-corner-all" onclick="add()">Add</button>

1 个答案:

答案 0 :(得分:0)

因为IDB是异步的。你需要在...中调用你的功能。

 transaction.oncomplete = function(event) {
      $(".clickme").click(function(){
      readAll();
   });     
  };

https://developer.mozilla.org/en-US/docs/Web/API/IDBTransaction/oncomplete