在由 Servlet 填充的表中選擇多行

Question

抱歉我的菜鳥問題，但我的 JSP 頁面上有一個由 servlet 填充的表格：

桌子

<table id="tableusers" class="table table-striped table-bordered bootstrap-datatable datatable">
    <thead>
        <tr>
            <th>Nom</th>
            <th>Prénom</th>
            <th>Adresse</th>
            <th>email</th>
        </tr>
    </thead>   
    <tbody>
        <tr>
        </tr>
    </tbody>
</table>   

JavaScript

$.get('/SRV/webUserServlet', function(responseJson) {
    if (responseJson != null) {
        var table1 = $("#tableusers");
        $.each(responseJson, function(key, value) {
            var rowNew = $("<tr><td></td><td class=\"center\"></td><td class=\"center\"></td><td class=\"center\"></td></tr>");
            rowNew.children().eq(0).text(value['nom']);
            rowNew.children().eq(1).text(value['prenom']);
            rowNew.children().eq(2).text(value['adresse']);
            rowNew.children().eq(3).text(value['email']);
            rowNew.appendTo(table1);
        });
    }
});

表已正確填充，但我嘗試了多個 jQuery javascripts 從該表中選擇多行並將選擇行的結果發送到另一個 servlet，但不幸的是，由於內容是動態的，我無法使任何 JS 腳本起作用。

如何選擇一個或多個（或所有）行並將選定的行（包含所有列）發送到 servlet？

Answer 1

在構建表時，將類和/或 id 分配給您想要從中獲取值的 td。 例如，您可以使用 jquery 來選擇一個 id，而不是選擇一個值。

<table id="tableusers" class="table table-striped table-bordered bootstrap-datatable datatable">
    <thead>
        <tr class="columns">
            <th id="col1">Nom</th>
            <th id="col2">Prénom</th>
            <th id="col3">Adresse</th>
            <th id="col4">email</th>
        </tr>
    </thead>   
    <tbody>
        <tr>
        </tr>
    </tbody>
</table>   

然后你可以選擇這樣的值：

$("#col1").text();

或者像這樣：

$("tr.columns th").each(function() {
    $(this).text();
});

如果您也需要這些值，則將相同的原則應用於正文中的行。

Answer 2

與servlet沒有關系，你只有一個javascript問題。

用原始 HTML 編寫一個簡單的頁面，包含您的 js 代碼並在瀏覽器中加載您的頁面並激活開發人員工具。 調試並查看調用了哪些 URL。 一旦您解決了這個問題，您將嘗試將該解決方案集成到您的 JSP 中。

Answer 3

最后，我使用 DOM 解析我的表：

                   var table = document.getElementById('tabletest');
               var rowLength = table.rows.length;
               for(var i=1; i<rowLength; i+=1){
                     var row = table.rows[i];
                     var cellLength = row.cells.length;
                         if(row.cells[0].getElementsByTagName('input')[0].checked==true){
                            console.log("checked");
                            console.log("cellule: "+row.cells[1].innerHTML);
                        }

                 } 

對於和我有同樣問題的人來說可能很有趣……但沒有 JQuery。

順便說一下，它只適用於靜態表格內容。 當我嘗試解析由 servlet 動態填充的表時，if 語句

if(row.cells[0].getElementsByTagName('input')[0].checked==true)

正在生成錯誤（輸入未定義），但通過查看表值，row.cells[0] 包含：

cell[0]: <input type="checkbox">

我嘗試使用具有確切表結構的靜態表：

 <table id="tabletest" class="table table-striped table-bordered bootstrap-datatable datatable"> <thead> <tr> <th style="width:20px;"><input type="checkbox" id="checkall" title="Select all"></th> <th>Nom</th> <th>Prénom</th> <th>Adresse</th> <th>email</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox"> </td> <td>john</td> <td>smith</td> <td>12 rue des laures</td> <td>john@tt.com</td> </tr> <tr> <td><input type="checkbox"> </td> <td>marcel</td> <td>dib</td> <td>13 rue des laures</td> <td>marcel@tt.com</td> </tr> <tr> <td><input type="checkbox"> </td> <td>toto</td> <td>titi</td> <td>14 rue des laures</td> <td>steph@tt.com</td> </tr> </tbody> </table>

使用以下腳本：

 function checkSelectedUsers(){ var table = document.getElementById('tabletest'); var rowLength = table.rows.length; for(var i=1; i<rowLength; i+=1){ var row = table.rows[i]; //console.log("row: "+row.innerHTML); console.log("row:"+row.innerHTML); console.log("cell[0]:"+row.cells[0].innerHTML); console.log("cell[1]:"+row.cells[1].innerHTML); if(row.cells[0].getElementsByTagName('input')[0].type == "checkbox") console.log("Checkbox:"+row.cells[0].getElementsByTagName('input')[0].checked); /* if(row.cells[0].getElementsByTagName('input')[0].checked==true){ console.log("checked"); console.log("cellule: "+row.cells[4].innerHTML); }*/ } }

我在日志控制台中有以下內容：

 row: <td><input type="checkbox"> </td> <td>john</td> <td>smith</td> <td>12 rue des laures</td> <td>john@tt.com</td> cell[0]:<input type="checkbox"> cell[1]:john Checkbox:false row: <td><input type="checkbox"> </td> <td>marcel</td> <td>dib</td> <td>13 rue des laures</td> <td>marcel@tt.com</td> cell[0]:<input type="checkbox"> cell[1]:marcel Checkbox:false row: <td><input type="checkbox"> </td> <td>toto</td> <td>titi</td> <td>14 rue des laures</td> <td>steph@tt.com</td> cell[0]:<input type="checkbox"> cell[1]:toto Checkbox:false

所以我的表被正確解析。 但是，如果我使用 JQuery 生成的表獲得相同的 JS 函數：

 $(document).ready(function() { $.get('/OrdolinkSRV/webUserServlet',function(responseJson) { if(responseJson!=null){ var table1 = $("#tableusers"); $.each(responseJson, function(key,value) { var rowNew = $("<tr><td><input type=\\"checkbox\\"></td><td></td><td></td><td></td><td></td></tr>"); rowNew.children().eq(1).text(value['nom']); rowNew.children().eq(2).text(value['prenom']); rowNew.children().eq(3).text(value['adresse']); rowNew.children().eq(4).text(value['email']); rowNew.appendTo(table1); }); } }); });

我有以下錯誤：

row:

未捕獲的類型錯誤：無法讀取未定義的屬性“innerHTML”