Проблема с кнопкой в ​​таблице HTML / CSS и Mysql

Question

У меня небольшая проблема. Прямо сейчас я программирую веб-сайт, который связан с базой данных MySQL. Я создал таблицу, заполненную продуктами, которые хранятся в базе данных. В каждой строке есть кнопка «Добавить в корзину», но как мне получить конкретный предмет для нее? У меня уже есть функция addtoCart(string articleName), но я не знаю, как получить название продукта.

Это то, что у меня так далеко:

<table id="Products">
              <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Description</th>
                <th>Price</th>
                <th>Stock</th>
              </tr>
    <% 

      Class.forName("com.mysql.jdbc.Driver");
      Connection  con = DriverManager.getConnection("jdbc:mysql://localhost:3306/shop", "root", "12345");
      Statement stmt = con.createStatement();
      ResultSet rs = stmt.executeQuery("SELECT* FROM products WHERE category='shisha'");

      while(rs.next()){
      int id = rs.getInt("articleID");
      String pname = rs.getString("productName");
      String description= rs.getString("description");
      float price = rs.getFloat("price");
      int stock = rs.getInt("stock");
      %>
              <tr>
                <td><%out.print(id);%></td>
                <td><%out.print(pname);%></td>
                <td><%out.print(description);%></td>
                <td><%out.print(price);%></td>
                <td><%out.print(stock);%></td>
                <td> </td>  
                <td><input type="text" placeholder="How much ?" name="quantity" required> </td>
                <td> <input class="button" type = "submit" value="Add to cart"> </td>
               </tr>
      <%
      }



      %>
      </table>   

Таким образом, он генерирует строку для каждого продукта со своей собственной кнопкой .... Я хочу вызвать функцию addtoCart(string articleName), но как мне получить название продукта для строки, в которой находится кнопка?

Answer 1

Используя Jquery, вы можете добавить к своей кнопке класс и атрибут данных, после чего вы можете получить это значение.

<input class="button" data-product="<%out.print(pname);%>" type = "submit" value="Add to cart">

 $('.button').click(function(){

  var product = $(this).data("product");
   addtoCart(product);

 });

Надеюсь, это поможет.

Спасибо

Answer 2

добавить его на кнопку. Вместо того, чтобы сделать кнопку кнопкой отправки, создайте

<button onclick="addToCart(%out.print(id);%);">Add to cart</button>

затем получите информацию о продукте в функции под названием addToCart