我的目标-点击一个按钮,获取产品价值,添加到购物车。
我有一个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>
https://stackoverflow.com/questions/51716043
复制相似问题