將不同的元素傳遞給一個具有相同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函數

回答

相關問題