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

我有一个jsp文件，我从表格的表格中检索数据库中的数据。我的jsp如下：将不同的元素传递给一个具有相同id的Javascript函数

<% 
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> 
    <% 
    } 
    %>

这将以行数为输出。当我点击'Add to Cart'按钮时，它应该将单元格元素传递给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); 
}

上述“警报只虽然我点击出现在第二行中的按钮的正在显示第一行的值。

我在网上尝试了很多选择，但无法解决问题。

来源

2013-03-21 Yashwanth Aluru

+10

两个元素不能有相同的'ID '。文档中的'id'必须是唯一的。 – 2013-03-21 14:36:46

它是正确的。我也以这种方式尝试过。我声明了一个变量'i'并按如下方式使用它： int i = 0; ％> ”><（％）= rs1.getString（1）％> .................... 现在如何我是否也可以将包含scriptlet标签的id传递给Javascript函数？ – 2013-03-21 14:41:27

决不具有相同的ID两次在同一页内
的concat一个唯一的密钥，该行的优选的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-21 14:42:08

非常感谢！它工作得很好。真的非常感谢你！ – 2013-03-21 15:08:01

为什么不利用这一点，你所寻求的价值是相对于被点击的元素。不需要给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-21 14:47:09 HMR

对于IE的老版本textContent是innerText我认为，所以如果你想支持这一点，你必须检查。 – HMR 2013-03-21 14:49:12

我有很多行显示在我的jsp中。如果我必须传递第二行的td元素，如果单击表的第二行中的丁丁，该怎么办？ – 2013-03-21 14:57:42

如果您单击第二行中的按钮，则会获取第二行的信息。在JavaScript和Java中，“this”是指当前对象，在您的情况下是指被点击的按钮。 – HMR 2013-03-22 00:23:34

最好的解决办法是使用class属性，而不是id：

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

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

如果你只是想要的东西的工作原理：

HMR's solution是好的，但它是一个有点刻板。它假定每个<td>（bname，aname，isbn ...）都存在并按特定顺序放置。
我修改了下面的Itay's solution以方便复制粘贴。它的工作原理是加入了独特的前缀（国际标准书号）每个ID，使其独特：

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-21 15:12:14 Leftium

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

回答

相关问题