1

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

上面的“警报”仅在我单击第二行中的按钮时才显示第一行的值。

我在网上尝试了很多替代方案，但无法解决问题。

4

3 回答 3

2
  1. 永远不要在一页中有两次相同的 ID
  2. 将唯一键（最好是行的 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);
}
于 2013-03-21T14:42:08.870 回答
0

为什么不使用它，您寻求的值与单击的元素相关。不需要为任何元素提供 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>
于 2013-03-21T14:47:09.343 回答
0

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

  • Anid应该准确地标识每页的一个元素。
  • Aclass标识每页具有相同类型或“类”的多个元素。

您可以查询整个 DOM 的子集（例如<tr>被点击的），以查找具有您感兴趣的类的元素。通常使用jQuery或Dojo之类的库来简化查询。

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

  • HMR的方案不错，就是有点死板。它假设每个<td>(bname, aname, isbn...) 都存在并按特定顺序放置。
  • 我在下面修改了Itay 的解决方案，以便于复制粘贴。它通过为每个 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);
}
于 2013-03-21T15:12:14.147 回答