前端Thymeleaf html页面向相应的js传参

前端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);
    //         }
    //     }
    // }




}