有时候只有一个input框,但input框有时候需要存放很多的值,如:
<table>
<tr>
<td>编号</td>
<td>姓名</td>
<td>年龄</td>
<td>出生日期</td>
<td>操作</td>
</tr>
<th:block th:each="test:${test_oneAllList}">
<tr>
<td class="testId" th:text="${test.testId}"></td>
<td><span th:text="${test.testName}"></span></td>
<td><span th:text="${test.testAge}"></span></td>
<td><span th:text="${#dates.format(test.testDate,'yyyy-MM-dd')}"></span></td>
<td>
<button onclick="select(this)"
class="btn btn-default" data-toggle="modal" data-target="#myModal">修改</button>
<button onclick="deletes(this)">删除</button>
</td>
</tr>
</th:block>
</table>
结果如图:
比如要根据编号对信息进行修改,如果用form表单提交可以用这种方式:
<a th:href="@{/Test/update(testId=${test.testId})}">修改</a>
但这种提交方式是需要跳转页面的,有很多情况是不能跳转页面修改的,这样会影响页面的美观,所以一般情况下修改是用模态框+Ajax来实现的。但用Ajax怎么获取一个文本框遍历出来某一列的id呢?
var testId = $(".testId").html();
这种情况肯定是不行的,因为这是遍历出来的值,所以只能获取到第一列id的值。
所以正确的遍历方式是
//修改
function select(res){
var testId = $(res).parent().siblings(".testId").html();
alert(testId);
}
html页面引用
<button onclick="select(this)">修改</button>
完整的Ajax的方法如下:
//查询
function select(res) {
var testId = $(res).parent().siblings(".testId").html();
$.ajax({
url:"/Test/selectId",
data:{
testId:testId
},
success: function(data){
//把根据id查询的值赋给模态框中的input框内
$("#testId").val(data.testId);
$("#testName").val(data.testName);
$("#testAge").val(data.testAge);
var time = new Date(data.testDate).toJSON();
var d = new Date(time);
//格式化日,如果小于9,前面补0
var day = ("0" + d.getDate()).slice(-2);
//格式化月,如果小于9,前面补0
var month = ("0" + (d.getMonth()+1)).slice(-2);
var times=d.getFullYear() + '-' + (month) + '-' + (day);
$("#testDate").val(times);
},
error:function (data) {
alert("没有该商品信息");
},
});
}