如何在使用 thymeleaf th:each 迭代的 jquery 中获取表值？

Question

在这里我创建了一个简单的表，其中包含实体类型对象的列表，由 thmeleaf 处理：每个，我很难从表中获取数据，这是代码

jQuery(document).ready(function($) {
	
	var formData;
	var url = window.location;
	// SUBMIT FORM
    $("#submit").click(function(event) {
		// Prevent the form from submitting via the browser.
		event.preventDefault();
		
		var rowcount =  $("#manualtable td").closest("tr").length;
		var wrpmanualbillentry=[]; //array variable
		var rc;
		
		var mbeid = $("input[name='mbeid[]']");
		var watercharge = $("input[name='watercharge[]']");
		
		for(rc=0;rc<rowcount;rc++)
		{
					
		wrpmanualbillentry.push({
							
								flatid : $("input[name=mbeid[]]").val(),
								watercharge :$("input[name=watercharge[]]").val(),
								waterchargeconsumed : $("input[name=waterchargeconsumed[]]").val(),
								powercharge : $("input[name=powercharge[]]").val(),
								powerchargeconsumed : $("input[name=powerchargeconsumed[]]").val()
	        		})
		}
		
		    alert(wrpmanualbillentry);
		    console.log(wrpmanualbillentry);
		
		//sample exercise
		
		/*var TableData = new Array();
		  $('#manualtable tr').each(function(row, tr) 
		{
		    TableData[row] = {
		    		
		      "flatid": $(tr).find('input:eq(0)').val(),
		      "flatname": $(tr).find('input:eq(1)').text(),
		      "powercharge": $(tr).find('input:eq(4)').val(),
		      "powerchargeconsumed": $(tr).find('input:eq(5)').val(),
		      "watercharge": $(tr).find('input:eq(2)').val(),
		      "waterchargeconsumed": $(tr).find('input:eq(3)').val()
		      
		    }//tableData[row]
		  });
		  
		  TableData.shift(); // first row will be empty - so remove
		  alert(TableData);
		  console.log(TableData);*/
		

				
		// PREPARE FORM DATA
    	var formData = wrpmanualbillentry;    		 		
    	alert(JSON.stringify(formData));
    	
    	// DO POST
    	$.ajax({
			type : "post",
			contentType: "application/json; charset=utf-8",
			url : url+"/manualbill",
			dataType : "json",
			data : JSON.stringify(formData),
			success : function(result) 
			{
				if(result.status == "saved")
				{
					$("#resultid").html(" Bill Details saved Successfully!" );
				}
				else
				{
					$("#resultid").html("<strong>Error</strong>");
				}
				
				/*alert(result.dataObj.username);*/
				console.log(result);
				console.log(result.status);
			},
			error : function(e) {
				
				$("#resultid").html("<strong>Error</strong>");
				/*$("#resultid").html(" Bill Details saved Successfully!" );*/
				console.log("ERROR: ", e);
			}
		});
    	
    	// Reset FormData after Posting
    	resetData();
	});
    function resetData()
    {
		 $("#waterchargeconsumed").val(""),
		 $("#powerchargeconsumed").val("")
		 
    }
});

<table id="manualtable">   
      <thead class="thead-default">  
        <tr>  
          <th>Flat ID</th>  
          <th>Flat Name</th>  
          <th>Name of the Charge</th>  
          <th>Unit Consumed</th>  
          <th>Name of the Charge</th>
          <th>Unit Consumed</th>
        </tr>
      </thead>  

      <tbody>  
        <tr th:each="mbe : ${manualbillentry}">  
          <td><input type="text" id="mbeid" th:value="${mbe.pkflatid}" style="border-color: transparent; border: none;" readonly/></td> 
          <td th:text="${mbe.flatname}"></td>
          <td><input type="text" id="watercharge" name="watercharge" style="border-color: transparent; border: none;" value="Water Charge" readonly="readonly" /></td>
          <td><input type="text" id="waterchargeconsumed" name="waterchargeconsumed" /></td>
          <td><input type="text" id="powercharge" name="powercharge" style="border-color: transparent; border: none;" value="Power Charge" readonly="readonly" /></td>
          <td><input type="text" id="powerchargeconsumed" name="powerchargeconsumed" /></td> 
        </tr> 
      </tbody>  
    </table>  

1) 这里的行可以由 thymeleaf (th:each) 对象自动生成 2) 我需要获取通过 jQuery 的所有 <td> <input> 值。 只需要保存 tbody 部分中的 input values。请指导我实现这一目标。

Answer 1

我使用Tabledit.js 完成了类似的事情。

下载并将其包含在您的视图文件中：

<script th:src="@{[your_path]/jquery.tabledit.js}"></script>

然后您提供如下脚本来执行您的任务：

<script type="text/javascript">
$('#manualtable').Tabledit({
    url: "updateTableAtt", 
    columns: {
        //identifier is used as a unique id for passing your id for db operation
        identifier: [2, 'flatid'],

        //make value to be editable here, if you dont want user to edit some fields, comment out or delete those fields from below list.
        editable: [[0, 'powercharge'], [1, 'watercharge'], [2, 'flatid']]
    }
});
</script>

相应地添加/修改/删除editable 属性列表。

使用上述脚本，您可以使用@RequestParam 在控制器中获取您的值。