Javascript HTML-单击按钮以获取表格单元格值_Javascript_Html_Spring Mvc

Javascript HTML-单击按钮以获取表格单元格值

javascript html spring-mvc

Javascript HTML-单击按钮以获取表格单元格值,javascript,html,spring-mvc,Javascript,Html,Spring Mvc,我的目标-点击一个按钮，获取产品价值，添加到购物车我有一个html页面，我想在其中单击一个按钮并获取productId值，为了获取它，插入购物车。每次加载页面时，我希望能够添加到购物车中的记录都会从数据库中获取问题是，当我按下按钮时，即使我用一个ID连接它，我只得到第一条记录，而且似乎按钮根本没有连接到表我附上了一张照片来展示页面的外观- 代码如下： <!DOCTYPE html> <html xmlns:th="http://www.w3.org/1999/

我的目标-点击一个按钮，获取产品价值，添加到购物车

我有一个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>


*{框大小：边框框；}
身体{
保证金：0；
字体系列：Arial、Helvetica、无衬线字体；
}
托普纳夫先生{
溢出：隐藏；
背景色：#e9e9e9；
}
.topnav a{
浮动：左；
显示：块；
颜色：黑色；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
字号：17px；
}
.topnav a:悬停{
背景色：#ddd；
颜色：黑色；
}
.topnav a.active{
背景色：#2196F3；
颜色：白色；
}
.topnav.search容器{
浮动：对；
}
.topnav输入[类型=文本]{
填充：6px；
边缘顶部：8px；
字号：17px；
边界：无；
}
.topnav.search容器按钮{
浮动：对；
填充：6px 10px；
边缘顶部：8px；
右边距：16px；
背景：ddd；
字号：17px；
边界：无；
光标：指针；
}
.topnav.search容器按钮：悬停{
背景：#ccc；
}
@媒体屏幕和屏幕（最大宽度：600px）{
.topnav.search容器{
浮动：无；
}
.topnav a、.topnav输入[type=text]，.topnav.search容器按钮{
浮动：无；
显示：块；
文本对齐：左对齐；
宽度：100%；
保证金：0；
填充：14px；
}
.topnav输入[类型=文本]{
边框：1px实心#ccc；
}
}
桌子{
边界塌陷：塌陷；
边界间距：0；
宽度：100%；
边框：1px实心#ddd；
}
th，td{
文本对齐：左对齐；
填充：16px；
}
tr:n个孩子（偶数）{
背景色：#F2F2
}
搜索结果
产品ID
名称
烙印
评级
价格
可利用性
添加到购物车
函数myfunction（）{
警报（document.getElementById（“productId”）.outerText）；
}

当您调用javascript函数myfunction（${product.productId}）并更改javascript函数myfunction（id）{}

时，请尝试此操作。问题是，您的所有按钮都将调用

myfunction

，而它只会获取第一个productId并使用该outerText，没有表示实际点击了哪个按钮

您可以将一个参数传递到

myfunction

，例如

productId

，也可以从单击处理程序内部使用事件对象，并从中找出单击的内容

我还建议您避免为此使用ID，因为它们在页面上是唯一的

如果你需要更具体的帮助，请告诉我

您的所有按钮都将调用相同的功能，无法确定应该将哪个产品添加到购物车。您应该为按钮提供一个数据属性，如

data productid

，并将其作为参数传递给函数（

this.dataset.productid

），以获取应添加到购物车的产品id。您还应该为其中一个表单元格提供产品id的id，并使用

document.getElementById（productid）.parentNode

获取行

此外，您的HTML还存在一些语法错误，比如在正文之前有HTML（标题）和两个末端标记


*{框大小：边框框；}
身体{
保证金：0；
字体系列：Arial、Helvetica、无衬线字体；
}
托普纳夫先生{
溢出：隐藏；
背景色：#e9e9e9；
}
.topnav a{
浮动：左；
显示：块；
颜色：黑色；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
字号：17px；
}
.topnav a:悬停{
背景色：#ddd；
颜色：黑色；
}
.topnav a.active{
背景色：#2196F3；
颜色：白色；
}
.topnav.search容器{
浮动：对；
}
.topnav输入[类型=文本]{
填充：6px；
边缘顶部：8px；
字号：17px；
边界：无；
}
.topnav.search容器按钮{
浮动：对；
填充：6px 10px；
边缘顶部：8px；
右边距：16px；
背景：ddd；
字号：17px；
边界：无；
光标：指针；
}
.topnav.search容器按钮：悬停{
背景：#ccc；
}
@媒体屏幕和屏幕（最大宽度：600px）{
.topnav.search容器{
浮动：无；
}
.topnav a、.topnav input[type=text]、.topnav.searc