这里我创建了一个简单的表,其中包含enity类型对象列表,由thmeleaf th处理:每个,我都很难从表中获取数据,这是代码
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("")
}
});
&#13;
<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>
&#13;
1)这里的行可以由百日咳(th:each)对象自动生成
2)我需要获取通过jQuery的所有<td> <input>
值。
只需保存 tbody 部分中的输入 值。请指导我实现这一目标。
答案 0 :(得分:0)
我使用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
在控制器中获取值。