Question

这是我当地存储中的内容：

cart:"[{"Movie_Title":"I Feel Pretty","date":"Monday","time":"9:30", 
"cinema_number":"3","price":"8.50","seat_number":""}, {"Movie_Title":"Breath","date":"Monday", 
"time":"17:30","cinema_number":"1","price":"8.50","seat_number":""}]"

这就是我现在用来展示购物车的内容：

function displayCart(){
var jsonData = JSON.parse(localStorage.getItem('cart'));
$.each(jsonData, function(key, value){$('#cart').append(`<table id = 
cart_table border= 10 ><thead><tr><th scope = "col">Movie Title</th><th scope = "col">Date</th><th scope = "col">Time</th><th scope = "col">Cinema</th><th scope = "col">Price</th><th scope = "col">Seat Number</th><th scope = "col">Remove</th></tr><td class="Movie_Title">${value.Movie_Title}</td><td class="Date">${value.date}</td><td class="Time">${value.time}</td><td 
class="Cinema_number">${value.cinema_number}</td>
 <td class="Price">${value.price}</td>
  <td class="seat_number">${value.seat_number}</td>
  <td><Button onclick = 'removeFromCart()'>Remove Item</Button>
</tr></table>`);
})
}

我目前正在“购物车”中为每个项目显示一个签名表，如下所示：

<table id="cart_table" border="10">
<thead>
<tr>
<th scope="col">Movie Title</th>
<th scope="col">Date</th>
<th scope="col">Time</th>
<th scope="col">Cinema</th>
<th scope="col">Price</th>
<th scope="col">Seat Number</th>
<th scope = "col">Remove Item</th>
</tr>
<tr>
<td class="Movie_Title">I Feel Pretty</td>
<td class="Date">Monday</td>
<td class="Time">9:30</td>
<td class="Cinema_Number">3</td>
<td class="Price">8.50</td>
<td class="Seat_Number"></td>
  <td><Button onClick = 'removeFromCart()'>Remove Item</Button></td>
</tr>

</thead>
</table>

目前我的“removeFromCart”功能没有做任何事情。

如何从locastorage中删除特定的表行值？

Answer 1

您可以使用索引值并将其传递给函数并删除它。（相同的顺序在数组和模板中）。你可以在这里观看演示：

`https://jsfiddle.net/Lqutq8r5`

，但由于索引更改而必须重绘表格时会出现问题。

要删除此问题，请为每行生成唯一标识符，并在其中查找foreach中的行。

Answer 2

基于您的对象，它看起来像“key”是一个索引，因为您没有命名的每组属性（在这种情况下，我将重命名键索引为更具描述性）。生成HTML时，只需将键滑入方法调用并修改方法调用即可接受该值。 ...<Button onclick = 'removeFromCart("+ key +")'>Remove Item</Button>。然后，您可以在方法中使用该索引来定位数组，以使用以下说明删除项目。

这似乎有点粗糙。从数组中删除特定项目似乎并不像在任何地方添加任何项目那样直截了当。我发现这个SO有一些相当不错的大纲，用array.splice完成这个并创建一个名为remove：How do I remove a particular element from an array in JavaScript?的原型函数。这个链接也是一个非常好的学习体验，因为几个人概述了JS版本特定的解决方案。

Answer 3

将localStorage字符串转换为元素。删除所需索引处的行或使用您已应用的标识属性。然后将表格作为字符串保存回localstorage。如果你需要更直观的东西，请告诉我。

如何从本地存储中删除表行

3 个答案: