表

<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从这个表中选择多行并将select行的结果发送到另一个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语句

如果（row.cells [0] .getElementsByTagName（ '输入'）[0] == .checked真）

生成错误（输入未定义），但通过查看表值，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:

未捕获的TypeError：无法读取未定义的属性“innerHTML”

在由Servlet填充的表中选择多行

表

的JavaScript

3 个答案: