我的目标-点击一个按钮,获取产品价值,添加到购物车。
我有一个html页面,在那里我想要点击一个按钮,并获得productId的值,以获取它,插入到购物车。每次加载页面时,都会从数据库中提取我希望能够添加到购物车中的记录
问题是,当我按下按钮时,即使我用ID连接它,我也只得到第一条记录,而且看起来按钮根本没有连接到表。
我附上了一张照片,以显示页面的样子-
代码如下:
<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
* {box-sizing: border-box;}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #e9e9e9;
}
.topnav a {
float: left;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #2196F3;
color: white;
}
.topnav .search-container {
float: right;
}
.topnav input[type=text] {
padding: 6px;
margin-top: 8px;
font-size: 17px;
border: none;
}
.topnav .search-container button {
float: right;
padding: 6px 10px;
margin-top: 8px;
margin-right: 16px;
background: #ddd;
font-size: 17px;
border: none;
cursor: pointer;
}
.topnav .search-container button:hover {
background: #ccc;
}
@media screen and (max-width: 600px) {
.topnav .search-container {
float: none;
}
.topnav a, .topnav input[type=text], .topnav .search-container button {
float: none;
display: block;
text-align: left;
width: 100%;
margin: 0;
padding: 14px;
}
.topnav input[type=text] {
border: 1px solid #ccc;
}
}
</style>
</head>
<div class="topnav">
<a class="active" href="/search">Home</a>
<a href="/about">About</a>
<a href="/contact">Contact</a>
<div class="search-container">
<form action="/results">
<input type="text" placeholder="Search.." name="search">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
</div>
<div style="padding-left:16px">
</div>
<style>
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
border: 1px solid #ddd;
}
th, td {
text-align: left;
padding: 16px;
}
tr:nth-child(even) {
background-color: #f2f2f2
}
</style>
</head>
<body>
<h2>Search Results</h2>
<table id="products">
<tr>
<th>Product ID</th>
<th>Name</th>
<th>Brand</th>
<th>Rating</th>
<th>Price</th>
<th>Availability</th>
<tr th:each="product : ${results}">
<td th:text="${product.productId}" id="productId"></td>
<td th:text="${product.productName}"></td>
<td th:text="${product.brand}"></td>
<td th:text="${product.rating}"></td>
<td th:text="${product.price}"></td>
<td th:text="${product.availableInStock}"></td>
<td><button onclick="myfunction()" class="btn-select" type="button" id="buttonc">Add to cart</button></td>
</tr>
</table>
<script>
function myfunction() {
alert(document.getElementById("productId").outerText);
}
</script>
</body>
</html>
发布于 2018-08-07 05:59:12
您的所有按钮都将调用相同的函数,使您无法确定应该将哪些产品添加到购物车中。您应该为按钮提供一个数据属性,比如data-productid
,并将其作为参数传递给函数(this.dataset.productid
),以获取应该添加到购物车中的产品的id。您还应该为其中一个单元格提供产品id的id,并使用document.getElementById(productid).parentNode
获取行。
此外,您的超文本标记语言还存在一些语法错误,比如在主体和两个结束</head>
标记之前存在超文本标记语言(头)。
<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
* {box-sizing: border-box;}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #e9e9e9;
}
.topnav a {
float: left;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #2196F3;
color: white;
}
.topnav .search-container {
float: right;
}
.topnav input[type=text] {
padding: 6px;
margin-top: 8px;
font-size: 17px;
border: none;
}
.topnav .search-container button {
float: right;
padding: 6px 10px;
margin-top: 8px;
margin-right: 16px;
background: #ddd;
font-size: 17px;
border: none;
cursor: pointer;
}
.topnav .search-container button:hover {
background: #ccc;
}
@media screen and (max-width: 600px) {
.topnav .search-container {
float: none;
}
.topnav a, .topnav input[type=text], .topnav .search-container button {
float: none;
display: block;
text-align: left;
width: 100%;
margin: 0;
padding: 14px;
}
.topnav input[type=text] {
border: 1px solid #ccc;
}
}
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
border: 1px solid #ddd;
}
th, td {
text-align: left;
padding: 16px;
}
tr:nth-child(even) {
background-color: #f2f2f2
}
</style>
</head>
<body>
<div class="topnav">
<a class="active" href="/search">Home</a>
<a href="/about">About</a>
<a href="/contact">Contact</a>
<div class="search-container">
<form action="/results">
<input type="text" placeholder="Search.." name="search">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
</div>
<div style="padding-left:16px">
</div>
<h2>Search Results</h2>
<table id="products">
<tr>
<th>Product ID</th>
<th>Name</th>
<th>Brand</th>
<th>Rating</th>
<th>Price</th>
<th>Availability</th>
<tr th:each="product : ${results}">
<td th:text="${product.productId}" id="${product.productId}"></td>
<td th:text="${product.productName}"></td>
<td th:text="${product.brand}"></td>
<td th:text="${product.rating}"></td>
<td th:text="${product.price}"></td>
<td th:text="${product.availableInStock}"></td>
<td><button onclick="myfunction(this.dataset.productid)" class="btn-select" type="button" data-productid="${product.productId}">Add to cart</button></td>
</tr>
</table>
<script>
function myfunction(productId) {
alert(productId);
var row = document.getElementById(productId).parentNode;
console.log(row);
}
</script>
</body>
</html>
发布于 2018-08-07 05:50:44
在调用javascript函数myfunction(${product.productId})并更改javascript函数函数myfunction(id) {}时尝试此方法
发布于 2018-08-07 05:51:22
问题是,所有的按钮都将调用myfunction
,而这只是获取第一个productId并使用该outerText,而没有指明实际单击的是哪个按钮。
您可以将一个参数传递给myfunction
,比如productId
,也可以从单击处理程序内部使用事件对象https://developer.mozilla.org/en-US/docs/Web/API/Event,并从中找出单击了什么。
我还建议您避免使用ID,因为它们在页面上是唯一的。
如果你需要更具体的帮助,请告诉我!
https://stackoverflow.com/questions/51716043
复制相似问题