时间戳

首页 > 解决方案 > 如何将 3d 数组传播到由 3 个单独的表数据标签组成的表中？

jquery - 如何将 3d 数组传播到由 3 个单独的表数据标签组成的表中？

问题描述

$('#goback').click(function () {
    window.history.back();
});
var cartitem = [];
var pp, name;
var i = 0,html="";
function adcart(name, value) {
    i++;
    name = name;
    pp = value;
    var t = parseInt(i * pp);
    console.log(t);
    cartitem.push([name, value]);
    console.log(cartitem);
}
$("button").click(function () {
    console.log("selected items" + i);
    console.log(cartitem.length);
    for (var m = 0; m < cartitem.length; m++) {
        for (var n = 0; n < cartitem.length; n++) {
            html +='<tr><td>'+cartitem[m]+'</td><td>'+cartitem[n]+'</td></tr>';
        }
    }
    $("#showcart").html(html);
});

如何将 2d 数组传播到 2 个单独的表数据标签的表中？在 html 中，我只有带有表格主体的表格标签，因为它的 id 名称是“showcart”。关于上面的脚本，如何从 javascript 2d 数组传播到 html 标签，以便 caritem[i] 应该在一个 td 标签中，而 caritem[j] 应该在另一个 td 标签中

标签： jqueryarraysmultidimensional-arrayhtml-table

解决方案

这里有几个js问题，

  1. 您使用 来添加购物车项目adcart()，并且您还调用了button点击事件，无需这样做。
  2. 您被声明了一个html变量并向其中添加项目，您需要在 for 循环之前清除此变量，或者那里不需要额外的变量，删除它并在 for 循环中使用一个变量，这样可以节省一些内存.

请检查更新的代码段。

$('#goback').click(function() {
  window.history.back();
});
var cartitem = [];
var pp, name;
var i = 0,
  html = "";

function adcart(name, value) {
  let image = event.target.parentElement.parentElement.firstElementChild.getAttribute('src');
  i++;
  name = name;
  pp = value;
  var t = parseInt(i * pp);
  var newItem = {
    name,
    value,
    image
  }
  cartitem.push(newItem);
  showCartItems(newItem)
}

function showCartItems(item) {
  html = '';
  html += "<tr>";
  html += `<td>${item.name}</td>`;
  html += `<td>${item.value}</td>`;
  html += `<td><img src='${item.image}' height='50px' width='50px' /></td>`;
  html += "</tr>";
  $("#showcart").append(html);
}
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons">
  <link rel="stylesheet" href="https://unpkg.com/bootstrap-material-design@4.1.1/dist/css/bootstrap-material-design.min.css" integrity="sha384-wXznGJNEXNG1NFsbm0ugrLFMQPWswR3lds2VeinahP8N0zJw9VWSopbjv2x7WCvX" crossorigin="anonymous">
  <title>Offer Zone</title>
  <style>
    .add {
      width: auto !important;
      text-align: center !important;
      font-size: 10px !important;
      width: auto !important;
    }
    
    .row {
      padding: 25px;
    }
    
    .card {
      height: 165px !important;
    }
    
    .cardcol {
      width: auto;
      padding-left: 0%;
      padding-right: 12px;
      height: 150px !important;
      padding-bottom: 25px !important;
    }
    
    .card-title {
      font-size: 15px;
      height: 30px !important;
      text-align: center !important;
    }
    
    .row {
      padding-bottom: 5px !important;
      height: 220px !important;
    }
    
    .card-img-top {
      width: 100% !important;
      height: 64.23px !important;
    }
    
    .navbar-brand i:hover {
      cursor: pointer !important;
    }
    
    .scrollmenu {
      background-color: rgba(197, 139, 31, 0.575);
      overflow: auto;
      white-space: nowrap;
    }
    
    .scrollmenu a {
      display: inline-block;
      color: white;
      text-align: center;
      padding: 5px;
      text-decoration: none;
    }
    
    .scrollmenu a:hover {
      background-color: rgba(240, 248, 255, 0.76);
      color: black;
    }
    
    .sc1 {
      background-color: rgba(153, 197, 31, 0.856);
      overflow: auto;
      white-space: nowrap;
      font-size: 18px !important;
    }
    
    .sc1 a {
      display: inline-block;
      color: white;
      text-align: center;
      padding: 5px;
      text-decoration: none;
    }
    
    .sc1 a:hover {
      background-color: rgba(240, 248, 255, 0.76);
      color: black;
    }
    
    .card-text {
      height: 80px !important;
    }
  </style>
</head>

<body>
  <nav class="navbar navbar-light bg-light justify-content-between">
    <a class="navbar-brand" id="goback"><i class="fas fa-arrow-left"></i></a>
    <form class="form-inline" style="margin-left: -40px!important;">
      <input class="form-control mr-sm-2" type="search" placeholder="Search Offers" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
      <i class="fas fa-shopping-cart pl-2"></i>
    </form>
  </nav>
  <div class="scrollmenu">
    <a href="#"><img src="https://lh3.googleusercontent.com/proxy/mIOiq4aAW6ss7SJGtPGapcLgrePfsu68TCA9sFzns2CaGXqFo0kA5gY_yLflFUZZUVtM3U1NdOVDlrKhZDtE5PueZvHcEWyn-DO1cNyXPTAyMG2HmakVRMxCvKhQPG1J4w" class="img-fluid" style="height: 30px; width: 25px;"><br>Deals of
      the day</a>
    <a href="#"><img src="https://i.ya-webdesign.com/images/sale-png-icon-8.png" class="img-fluid" style="height: 30px; width: 25px;"><br>Stock clearence</a>
    <a href="#"><img src="https://icons-for-free.com/iconfiles/png/512/basic-sticker-week-131994876053238198.png" class="img-fluid" style="height: 30px; width: 25px;"><br>Big steals of the week</a>
    <a href="#"><img src="https://cdn4.iconfinder.com/data/icons/devine_icons/Black/PNG/Folder%20and%20Places/Stack.png" class="img-fluid" style="height: 30px; width: 25px;"><br>Save more</a>
  </div>
  <div class="scrollmenu sc1 mt-2">
    <a href="#">All</a>
    <a href="#">Beauty</a>
    <a href="#">Toys & More</a>
    <a href="#">Home Furniture</a>
    <a href="#">Electronics</a>
  </div>
  <div class="container">
    <div class="row">
      <div class="col-sm-4 col-4 cardcol">
        <a href="#">
          <div class="card">
            <img class="card-img-top img-fluid" src="https://media.architecturaldigest.com/photos/5a00e0d2f0511d186d9210d3/master/w_1600%2Cc_limit/built-ins-starrett-ringbom-1.jpg" alt="Card image cap">
            <!-- <div class="card-body"> -->
            <p class="card-title" name="name" value="Home">Home</p>
            <p class="card-text">
              <input type="number" class="form-control" value="30000" id="price" disabled>
              <button id="add" type="button" value="30000" name="Home" class="btn btn-primary add" onclick="adcart(this.name,this.value);">Add to cart</button></p>
            <!-- </div> -->
          </div>
        </a>
      </div>
      <div class="col-sm-4 col-4 cardcol">
        <a href="#">
          <div class="card">
            <img class="card-img-top img-fluid" src="https://cdn.elkor.lv/media/catalog/category/vigodno_all_.png" alt="Card image cap">
            <!-- <div class="card-body"> -->
            <p class="card-title" id="appliances" name="name" value="Appliances">Appliances</p>
            <p class="card-text">
              <input type="number" class="form-control" value="90000" id="price" disabled>
              <button id="add" type="button" value="60000" name="appliances" class="btn btn-primary add" onclick="adcart(this.name,this.value);">Add to cart</button></p>
            <!-- </div> -->
          </div>
        </a>
      </div>
      <div class="col-sm-4 col-4 cardcol">
        <a href="#">
          <div class="card">
            <img class="card-img-top img-fluid" src="https://s3.sywcdn.net/getImage?url=%2F%2Fs2.sywcdn.net%2Fuser%2Fd51d_20668099.jpg&t=category&w=300&h=300&qlt=100&mrg=1&crpw=2&crph=2&s=1471afeb0212a7f7ec8627dde75ce94c" alt="Card image cap">
            <!-- <div class="card-body"> -->
            <p class="card-title" id="Sports" name="name" value="Sports & More">Sports & More</p>
            <p class="card-text">
              <input type="number" class="form-control" value="60000" id="price" disabled>
              <button id="add" type="button" name="sports & more" value="90000" class="btn btn-primary add" onclick="adcart(this.name,this.value);">Add to cart</button>
            </p>
            <!-- </div> -->
          </div>
        </a>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-4 col-4 cardcol">
        <a href="#">
          <div class="card">
            <img class="card-img-top img-fluid" src="https://media.architecturaldigest.com/photos/5a00e0d2f0511d186d9210d3/master/w_1600%2Cc_limit/built-ins-starrett-ringbom-1.jpg" alt="Card image cap">
            <!-- <div class="card-body"> -->
            <p class="card-title">Home</p>

            <!-- </div> -->
          </div>
        </a>
      </div>
      <div class="col-sm-4 col-4 cardcol">
        <a href="#">
          <div class="card">
            <img class="card-img-top img-fluid" src="https://cdn.elkor.lv/media/catalog/category/vigodno_all_.png" alt="Card image cap">
            <!-- <div class="card-body"> -->
            <p class="card-title">Appliances</p>

            <!-- </div> -->
          </div>
        </a>
      </div>
      <div class="col-sm-4 col-4 cardcol">
        <a href="#">
          <div class="card">
            <img class="card-img-top img-fluid" src="https://s3.sywcdn.net/getImage?url=%2F%2Fs2.sywcdn.net%2Fuser%2Fd51d_20668099.jpg&t=category&w=300&h=300&qlt=100&mrg=1&crpw=2&crph=2&s=1471afeb0212a7f7ec8627dde75ce94c" alt="Card image cap">
            <!-- <div class="card-body"> -->
            <p class="card-title">Sports & More</p>

            <!-- </div> -->
          </div>
        </a>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-4 col-4 cardcol">
        <a href="#">
          <div class="card">
            <img class="card-img-top img-fluid" src="https://media.architecturaldigest.com/photos/5a00e0d2f0511d186d9210d3/master/w_1600%2Cc_limit/built-ins-starrett-ringbom-1.jpg" alt="Card image cap">
            <!-- <div class="card-body"> -->
            <p class="card-title">Home</p>
            <!-- </div> -->
          </div>
        </a>
      </div>
      <div class="col-sm-4 col-4 cardcol">
        <a href="#">
          <div class="card">
            <img class="card-img-top img-fluid" src="https://cdn.elkor.lv/media/catalog/category/vigodno_all_.png" alt="Card image cap">
            <!-- <div class="card-body"> -->
            <p class="card-title">Appliances</p>

            <!-- </div> -->
          </div>
        </a>
      </div>
      <div class="col-sm-4 col-4 cardcol">
        <a href="#">
          <div class="card">
            <img class="card-img-top img-fluid" src="https://s3.sywcdn.net/getImage?url=%2F%2Fs2.sywcdn.net%2Fuser%2Fd51d_20668099.jpg&t=category&w=300&h=300&qlt=100&mrg=1&crpw=2&crph=2&s=1471afeb0212a7f7ec8627dde75ce94c" alt="Card image cap">
            <!-- <div class="card-body"> -->
            <p class="card-title">Sports & More</p>

            <!-- </div> -->
          </div>
        </a>
      </div>
    </div>
    <table class="table table-responsive">
      <thead>
        <tr>
          <td>Name</td>
          <td>Price</td>
        </tr>
      </thead>
      <tbody id="showcart">

      </tbody>
    </table>
  </div>
  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://unpkg.com/popper.js@1.12.6/dist/umd/popper.js" integrity="sha384-fA23ZRQ3G/J53mElWqVJEGJzU0sTs+SvzG8fXVWP+kJQ1lwFAOkcUOysnlKJC33U" crossorigin="anonymous"></script>
  <script src="https://unpkg.com/bootstrap-material-design@4.1.1/dist/js/bootstrap-material-design.js" integrity="sha384-CauSuKpEqAFajSpkdjv3z9t8E7RlpJ1UP0lKM/+NdtSarroVKu069AlsRPKkFBz9" crossorigin="anonymous"></script>
  <script>
    $(document).ready(function() {
      $('body').bootstrapMaterialDesign();
    });
  </script>
  <script src="https://kit.fontawesome.com/596df9a01c.js" crossorigin="anonymous"></script>
  <script src="cartscript.js"></script>
</body>

</html>

推荐阅读