<table>
    <colgroup>
        <col width="18px">
        <col width="calc(40% - 18px)">
        <col width="20%">
        <col width="20%">
        <col width="20%">
    </colgroup>
    <thead>
        <tr>
            <th></th>
            <th>수집시각</th>
            <th>돌발 수집 건수</th>
            <th>공사/행사 수집 건수</th>
            <th>돌발+공사/행사</th>
        </tr>
    </thead>
    <tbody></tbody>
    <tfoot></tfoot>
</table>
<script>
    const endPoint = "getPeriodRcvIncdHistory";

    function callBack(data) {
        if (data && data.length) {
            let incdTot = 0;
            let evtTot = 0;
            let sumCntTot = 0;
            data.forEach((obj)=>{
                let incdCnt = Number(obj.incdCnt) || 0;
                let evtCnt  = Number(obj.evtCnt) || 0;
                let sumCnt  = Number(obj.sumCnt) || 0;

                incdTot   += incdCnt;
                evtTot    += evtCnt;
                sumCntTot += sumCnt;
            });
            return `<tr>
                      <td></td>
                      <td>합계</td>
                      <td>${incdTot.toLocaleString()}</td>
                      <td>${evtTot.toLocaleString()}</td>
                      <td>${sumCntTot.toLocaleString()}</td>
                    </tr>`;
        }
    }

    function getTableRow(obj, idx) {
        let incdCnt = Number(obj.incdCnt) || 0;
        let evtCnt  = Number(obj.evtCnt) || 0;
        let sumCnt  = Number(obj.sumCnt) || 0;
        return `<tr onclick="rowClick(this, 'container-2 table tbody')" >
                    <td><input style="display: none" type="checkbox" id="check_${idx}" onchange="checkEvent(this, 'container-2 table tbody')"></td>
                    <td>${obj.regDate}</td>
                    <td>${incdCnt.toLocaleString()}</td>
                    <td>${evtCnt.toLocaleString()}</td>
                    <td>${sumCnt.toLocaleString()}</td>
                </tr>`;
    }

</script>