在由 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 javascript 从该表格中选择多行并将选择行的结果发送到另一个 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”