Question

我目前正在使用我的AddToCart函数将表行数据保存到本地存储：

所以我现在有这张桌子：

<table border="1">
 <tbody>
  <tr>
   <th> Book Title </th>
   <th> Author </th>
   <th> Quantity </th>
   <th> Book </th>
 </tr>
 <tr>
  <td class="Book_Title">Gone </td>
  <td class="Author">Micheal Grant</td>
  <td class = "Quantity"><input></input></td>
  <th><button class="AddToCart">Add To Cart</button> </th>
</tr>
<tr>
  <td class="Book_Title">The Knife of never letting go</td>
  <td class="Author">Ryan Howard</td>
    <th class = "Quantity"><input></input></th>
  <td><button class="AddToCart">Add To Cart</button> </td>
</tr>
</tbody>
</table>

这就是AddToCart函数中的内容：

$("table").on("click", ".AddToCart", function(e){

  // Get previous storage, if any.
  var storage = JSON.parse(localStorage.getItem("cart"));
  if(storage==null){
  storage = [];
  }

  var row = $(this).closest("tr");
  var title = row.find("td").eq(0).text().trim();
  var author = row.find("td").eq(1).text().trim();
  var quantity = row.find("td").eq(2).text().trim();

  // Create an object to store.
  var data = {author:author,title:title,quantity:quantity};
  storage.push(data);

  // Store it.
  localStorage.setItem("cart",JSON.stringify(storage));

  });

我目前遇到的问题是，当我尝试保存数量的输入值时，它没有保存在本地存储中，它只是“”。对此问题的任何修复？

Answer 1

您需要将其设置为row.find("td").eq(2).text().trim()，而不是将数量设置为row.find("input").val()。这可以在以下工作示例中看到：

$("table").on("click", ".AddToCart", function(e) {

  var row = $(this).closest("tr");
  var title = row.find("td").eq(0).text().trim();
  var author = row.find("td").eq(1).text().trim();
  var quantity = row.find("input").val();

  // Create an object to store.
  var data = {
    author: author,
    title: title,
    quantity: quantity
  };

  console.log(data.quantity);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
  <tbody>
    <tr>
      <th> Book Title </th>
      <th> Author </th>
      <th> Quantity </th>
      <th> Book </th>
    </tr>
    <tr>
      <td class="Book_Title">Gone </td>
      <td class="Author">Micheal Grant</td>
      <td class="Quantity"><input></td>
      <td><button class="AddToCart">Add To Cart</button></td>
    </tr>
    <tr>
      <td class="Book_Title">The Knife of never letting go</td>
      <td class="Author">Ryan Howard</td>
      <th class="Quantity"><input></th>
      <td><button class="AddToCart">Add To Cart</button> </td>
    </tr>
  </tbody>
</table>

另请注意，<input>为 empty element （因此没有结束标记），<tbody> does not permit 任何<th>个孩子。我在答案中修正了这两个问题。

Answer 2

像往常一样，使用jquery是造成混乱的原因。

当东西开始不起作用时，请尝试使用纯javascript来解决问题。

＆＃13;

console.log(
document.getElementsByClassName("Quantity")[0].children[0].value
)

console.log(
document.querySelector(".Quantity input").value
)

//  localStorage.setItem("Quantity", document.getElementsByClassName("Quantity")[0].children[0].value)

＆＃13;

<table border="1">
 <tbody>
  <tr>
   <th> Book Title </th>
   <th> Author </th>
   <th> Quantity </th>
   <th> Book </th>
 </tr>
 <tr>
  <td class="Book_Title">Gone </td>
  <td class="Author">Micheal Grant</td>
  <td class = "Quantity"><input value="123"></input></td>
  <th><button class="AddToCart">Add To Cart</button> </th>
</tr>
<tr>
  <td class="Book_Title">The Knife of never letting go</td>
  <td class="Author">Ryan Howard</td>
    <th class = "Quantity"><input></input></th>
  <td><button class="AddToCart">Add To Cart</button> </td>
</tr>
</tbody>
</table>

＆＃13;

严重的是在2018年，忘了使用jquery。

将输入值添加到localStorage

2 个答案: