如何将 3d 数组传播到由 3 个单独的表数据标签组成的表中？
Posted
技术标签:
【中文标题】如何将 3d 数组传播到由 3 个单独的表数据标签组成的表中？【英文标题】：How to propagate the 3d array into a table of 3 separate table data tags? 【发布时间】：2020-06-04 18:19:26 【问题描述】：$('#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);
);
如何将二维数组传播到包含 2 个单独表格数据标签的表格中？在 html 中，我只有带有表格主体的表格标签，因为它的 id 名称是“showcart”。关于上面的脚本，如何从 javascript 二维数组传播到 html 标签，以便 caritem[i] 应该在一个 td 标签中，而 caritem[j] 应该在另一个 td 标签中
【问题讨论】：
请分享屏幕截图或代码 sn-p 以更好地理解您的问题。以及为什么要在循环中编写相同的循环，因为它在同一个数组上，所以没有区别和使用内部循环。并请分享您的数组格式。 jsfiddle.net/Manoj07/qvdyaz7c 这里我得到了正确的输出，但我得到了相同数据的多个表数据 当我检查你的小提琴时，即使没有你的脚本，你的数据打印也是一样的。？ 你可以检查脚本......它在那里（外部脚本）。在 JS 段中 您的问题只是您一次又一次地获得相同的 Home-Appliances-Sports & More 还是其他？ 【参考方案1】：这里有几个 js 问题，
-
您使用
adcart() 添加购物车项目，并且您还调用了button 点击事件，不需要这样做。
您被声明为html 变量并向其中添加项目，您需要在 for 循环之前清除此变量，或者那里不需要额外的变量，将其删除并在 for 循环中使用变量，这样您就可以节省一些内存。
请检查更新的 sn-p。
$('#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" >
<!-- <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" >
<!-- <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" >
<!-- <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" >
<!-- <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" >
<!-- <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" >
<!-- <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" >
<!-- <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" >
<!-- <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" >
<!-- <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>【讨论】：
Ningal adipoli etta... polichu。来自曼加拉普拉姆的爱以上是关于如何将 3d 数组传播到由 3 个单独的表数据标签组成的表中？的主要内容，如果未能解决你的问题，请参考以下文章