table中每个tr封装成一个对象传于后台存储

---

前言

table中每个tr封装成一个对象传于后台存储

---

一、需求？

用户获取的动态数据在页面渲染,一系列操作后确认无误,将其写入数据库

二、步骤

1.数据渲染

代码如下（示例）：

<!--确认保存按钮-->
<button name="button-3" id="button-3" class="btn btn-success" onclick="save()" type="button">
     <i class="Hui-iconfont">&#xe632;</i> 保存結果
 </button>

<!--动态数据-->
<table  class="table table-border table-bordered table-bg table-hover table-sort" id="table">
    <thead>
         <tr class="text-c">
             <th>NO</th>
             <th style="display: none">Staff ID</th>
             <th>Staff ID</th>
             <th>姓名</th>
             <th>每月薪金</th>
             <th style="display: none">time</th>
             <th>加班時間</th>
             <th>加班費</th>
             <th>病/事假(天數)</th>
             <th>病/事假(薪金)</th>
             <th>EC MPF</th>
             <th>ER MPF</th>
             <th>扣MPF後 總收入</th>
             <th class="show">編輯</th>
         </tr>
    </thead>
    <tbody>
         <tr class="text-c" th:each="staffWageRecord,sta:${staffWageRecordList}" th:object="${staffWageRecord}">
            <td name="no" th:value="${sta.index + 1}" th:text="${sta.index + 1}">NO</td>
            <td name="staffId" th:value="*{staffId}" style="display: none" th:text="*{staffId}">Staff ID</td>
            <td name="staffNo" th:value="*{staffNo}" th:text="*{staffNo}">Staff No</td>
            <td name="staffName" th:value="*{staffName}" th:text="*{staffName}">姓名</td>
            <td name="wage" th:value="*{wage}" th:text="*{wage}">每月薪金</td>
            <td name="time" th:value="*{time}" style="display: none" th:text="*{time}">time</td>
            <td name="overtime" th:value="*{overtime}" th:text="*{overtime}">加班時間</td>
            <td name="overtimeFee" th:value="*{overtimeFee}" th:text="*{#numbers.formatDecimal(overtimeFee,1,'COMMA',2,'POINT')}" class="text-r">加班費</td>
            <td name="vacateDays" th:value="*{vacateDays}" th:text="*{vacateDays}">病/事假(天數)</td>
            <td name="vacateFee" th:value="*{vacateFee}" th:text="*{#numbers.formatDecimal(vacateFee,1,'COMMA',2,'POINT')}" class="text-r">病/事假(薪金)</td>
            <td name="ecMpf" th:value="*{ecMpf}" th:text="*{#numbers.formatDecimal(ecMpf,1,'COMMA',2,'POINT')}" class="text-r">EC MPF</td>
            <td name="erMpf" th:value="*{erMpf}" th:text="*{#numbers.formatDecimal(erMpf,1,'COMMA',2,'POINT')}" class="text-r">ER MPF</td>
            <td name="afterMpf" th:value="*{afterMpf}" th:text="*{#numbers.formatDecimal(afterMpf,1,'COMMA',2,'POINT')}" class="text-r">扣MPF後</td>
            <td name="edit" th:value="0" class="show">
                 <a style="text-decoration:none" class="ml-5" th:onclick="'javascript:editStaffVacateMoney(\''+*{staffId}+'\',\'' + *{vacateFee} +'\')'">
                      <i class="Hui-iconfont">&#xe6df;</i>
                </a>
            </td>
        </tr>
    </tbody>
</table>

2.数据传递

function save() {
        var date = $('#dateShow').val();
        var list = new Array();
        $("#table").find("tbody").find("tr").each(function () {
            var staffWage = {};
            $(this).find("td").each(function () {
                staffWage[$(this).attr("name")] = $(this).attr("value");
            });
            list.push(staffWage);
        });
        var jsonTemp = JSON.stringify(list);
        var obj = {
            "list" : jsonTemp,
            "date" : date
        }
        $.ajax({
            type: "POST",
            url: "save-staffWage",
            data: obj,
            dataType: "json",
            //contentType : "application/json;charset=UTF-8",
            success: function (data) {
                if (data.code == 1) {
                    layer.msg("保存成功!", {time: 1000});
                    refresh();
                }
            },
            error: function () {
                alert("伺服器出錯,保存失敗!");
            }
        })
    }

总结

将数据封装成json传于后台,转成相应实体.