Question

我有一个jsp文件，我以表格的形式从数据库中检索数据。我的jsp如下：

<%
ResultSet rs1 = stmt.executeQuery("select * from book where category='Fiction'");
%>

<h1><font size="3">
<form name="f1" id="f1" method="post">
<table border="1">
    <tr>
        <th>Name of the Book</th>
        <th>Author</th>
        <th>ISBN</th>
        <th>Price</th>
        <th>Publication</th>
        <th>Description</th>
    </tr>
    <%
    while(rs1.next())
    {
    %>
    <tr> 
        <td id="bname"><%= rs1.getString(1) %></td>
        <td id="aname"><%= rs1.getString(2) %></td>
        <td id="isbn"><%= rs1.getString(3) %></td>
        <td id="price"><%= rs1.getString(4) %></td>
        <td id="pname"><%= rs1.getString(5) %></td>
        <td id="desc"><%= rs1.getString(7) %></td>
        <td><input type="button" value="Add to Cart" onclick="cart()"></input></td>
    </tr>  
    <%
    }
    %>

此输出将以行数表示。当我点击“添加到购物车”按钮时，它应该将单元格元素传递给javascript函数，从而通过JS函数传递给servlet。

我面临的问题是，因为每个'td'的id是相同的，虽然我点击了他表的第二行，但只有第一行的元素传入了javascript函数。

这是我的javascript函数：

function cart()
{
    var bname = window.document.getElementById("bname").textContent;
    var isbn = window.document.getElementById("isbn").textContent;
    var price = window.document.getElementById("price").textContent;
    alert(bname);
    alert(isbn);
    alert(price);
}

上面的'警告'只显示第一行的值，但我点击了第二行中的按钮。

我在线尝试了很多替代品，但无法解决问题。

Answer 1

从不在一个页面中两次使用相同的ID
将唯一键（最好是行的id）连接到TD的id。在代码中使用该计算的id。应该很简单

代码：

//assuming 0 is the ID index in the row  
<td id="bname<%= rs1.getString(0) %>"><%= rs1.getString(1) %></td>

<td><input type="button" value="Add to Cart"
           onclick="cart(<%= rs1.getString(0) %>)"></input></td>

...
...
...

function cart(id) {  
    var bname = window.document.getElementById("bname"+id).textContent;
    var isbn = window.document.getElementById("isbn"+id).textContent;
    var price = window.document.getElementById("price"+id).textContent;

    alert(bname);   
    alert(isbn);
    alert(price);
}

Answer 2

为什么不使用它，你寻找的值是相对于被点击的元素。不需要为任何元素提供id。

请注意，我传递了点击卡片功能的按钮：

 onclick="cart(this)"

这是完整的代码。

<!doctype html>
<html lang="en">
    <head> 
        <meta charset="utf-8" />  
        <title>Test the script</title>  
    <script> 
        function cart(button)
        {
            var tds=button.parentNode
              .parentNode.getElementsByTagName("td");
            var bname = tds[0].textContent;
            var isbn = tds[1].textContent;
            var price = tds[2].textContent;
            console.log(bname);
            console.log(isbn);
            console.log(price);
            console.log(tds);
        }
    </script>
    </head>
    <body> 
<h1><font size="3">Title</font></h1>
<form name="f1" id="f1" method="post">
<table border="1">
    <tr>
        <th>Name of the Book</th>
        <th>Author</th>
        <th>ISBN</th>
        <th>Price</th>
        <th>Publication</th>
        <th>Description</th>
    </tr>
    <tr> 
        <td >aname1</td>
        <td >bname1</td>
        <td >isbn1</td>
        <td >price1</td>
        <td >pname1</td>
        <td >desc1</td>
        <td><input type="button" value="Add to Cart" onclick="cart(this)"></input></td>
    </tr>  
    <tr> 
        <td >aname2</td>
        <td >bname3</td>
        <td >isbn4</td>
        <td >price2</td>
        <td >pname2</td>
        <td >desc2</td>
        <td><input type="button" value="Add to Cart" onclick="cart(this)"></input></td>
    </tr>  
    </table>
    </body>
</html>

Answer 3

最佳解决方案是使用class属性而不是id：

id应该确定每页只有一个元素。
class标识每个页面的相同类型或“类”的多个元素。

您可以查询整个DOM的子集（例如，单击的<tr>）以查找您感兴趣的类的元素。通常是jQuery或Dojo等库用于简化查询。

如果你只是想要有用的东西：

HMR's solution很好，但有点僵硬。它假定每个<td>（bname，aname，isbn ...）存在并按特定顺序排列。
我已修改下面的Itay's solution以便轻松复制粘贴。它的工作原理是为每个id添加一个唯一的前缀（isbn），使其唯一：

JSP：

<tr> 
    <td id="<%= rs1.getString(3) %>_bname"><%= rs1.getString(1) %></td>
    <td id="<%= rs1.getString(3) %>_aname"><%= rs1.getString(2) %></td>
    <td id="<%= rs1.getString(3) %>_isbn"><%= rs1.getString(3) %></td>
    <td id="<%= rs1.getString(3) %>_price"><%= rs1.getString(4) %></td>
    <td id="<%= rs1.getString(3) %>_pname"><%= rs1.getString(5) %></td>
    <td id="<%= rs1.getString(3) %>_desc"><%= rs1.getString(7) %></td>
    <td><input type="button" value="Add to Cart"
               onclick="cart('<%= rs1.getString(3) %>_')"></input></td>
</tr>

JavaScript的：

function cart(prefix)
{
    var bname = window.document.getElementById(prefix + "bname").textContent;
    var isbn = window.document.getElementById(prefix + "isbn").textContent;
    var price = window.document.getElementById(prefix + "price").textContent;
    alert(bname);
    alert(isbn);
    alert(price);
}

将不同的元素传递给具有相同id的Javascript函数

3 个答案: