前端Thymeleaf html页面向相应的js传参
要求:根据点击 出厂日期 + 有效日期 30天形成 = 过期日期
关键:如果是多行记录,需要知道点击的行信息,用来区别。在技术上就涉及到 HTML 传参到 JS。
<tr th:each="raw:${taskDtls}" class="table-tr">
<td th:text="${rawStat.count}">1</td>
<td th:text="${raw.taskCode}">1</td>
<td th:text="${raw.whseCode}">code</td>
<!--<td th:text="${raw.channelclientNbr}">code</td>-->
<td th:text="${raw.skuCode}">code</td>
<td th:text="${raw.skuBarcode}">code</td>
<td th:text="${raw.skuName}">name</td>
<td th:text="${raw.counterCode}">name</td>
<td th:text="${raw.counterCode}">name</td>
<td th:text="${raw.preQty}">name</td>
<td th:if="${status} lt 40">
<input maxlength="13" class="form-control" data-start-view="1" type="number" name="actlQty" th:value="${raw.preQty}" >
</td>
<td th:if="${status} eq 40" th:text="${raw.actlQty}"></td>
<td th:if="${status} lt 40">
<input maxlength="13" class="form-control" data-start-view="1" type="text" name="batchBnr" th:value="${raw.batchBnr}" >
</td>
<td th:if="${status} eq 40" th:text="${raw.actlQty}"></td>
<td th:if="${status} lt 40">
<input id="mfgDate" type="text" class="form-control datepicker" placeholder="生产日期" data-start-view="1"
onclick="laydate({istime: true, format: 'YYYY-MM-DD'})" th:onblur="'javascript:checkXpireDate('+${rawStat.index}+');'"
style="background-color: #fff;" readonly="readonly" name="mfgDate">
</td>
<td th:if="${status} eq 40" th:text="${#dates.format(raw.mfgDate,'yyyy-MM-dd HH:mm:ss')}"></td>
<td th:if="${status} lt 40">
<input id="xpireDate" type="text" class="form-control datepicker" placeholder="过期时间" data-start-view="1"
onclick="laydate({istime: true, format: 'YYYY-MM-DD'})"
style="background-color: #fff;" readonly="readonly" name="xpireDate">
</td>
<td th:if="${status} eq 40" th:text="${#dates.format(raw.xpireDate,'yyyy-MM-dd HH:mm:ss')}"></td>
<td th:if="${status} lt 40">
<input maxlength="13" class="form-control" data-start-view="1" type="text" name="serialNbr" th:value="${raw.serialNbr}" >
</td>
<td th:if="${status} eq 40" th:text="${raw.serialNbr}"></td>
<td th:if="${status} lt 40">
<textarea maxlength="150" name="description" class="form-control" data-start-view="1" th:value="${raw.description}" placeholder="最多150字"></textarea>
</td>
<td th:if="${status} eq 40" th:text="${raw.description}"></td>
</tr>
这里 th:οnblur=“‘javascript:checkXpireDate(‘+${rawStat.index}+’);’” 则是关键,js接受则是:
function checkXpireDate(index){
alert(index);
// var trs = $(".table-tr");
// var list = [];
// if (trs.size() > 0) {
// for (var i = 0; i < trs.size(); i++) {
// if (Number(trs[i].cells[9].children[0].value) > 0) {
// var od = {
// taskCode:trs[i].cells[1].innerHTML,
// skuCode:trs[i].cells[3].innerHTML,
//
// mfgDate: trs[i].cells[11].children[0].value,
//
// }
// list.push(od);
// }
// }
// }
}