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関数を介してサーブレットに渡されます。

ここで直面している問題は、すべての 'td' の ID が同じであるため、テーブルの 2 行目をクリックしても、最初の行の要素のみが 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);
}

上記の「アラート」は、2 行目にあるボタンをクリックしても、最初の行の値のみを表示しています。

オンラインで非常に多くの代替案を試しましたが、問題を解決できませんでした。

4

3 に答える 3

2
  1. 1 つのページで同じ ID を 2 回使用しない
  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です。

  • idは、ページごとに 1 つの要素を正確に識別することになっています。
  • classは、ページごとに同じタイプまたは「クラス」の複数の要素を識別します。

<tr>DOM 全体のサブセット (クリックされたものなど) に対して、関心のあるクラスを持つ要素を照会できます。通常、 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 に答える