【JavaScript】JS写法随笔(二) JS动态生成表格

主要思路：通过Ajax请求后端接口并拿到结果list之后，然后通过DOM获取tbody并向tbody中添加行、单元格。

$("#calculate").click(function () {
    var amount = $("#amount").val();
    var apr = $("#apr").val();
    var installments = $("#installments").val();
    var startDate = $("#startDate").val();
    var planInfoList = [];
    $.ajax({
        url: '/common/repayment_calculate',
        type: 'POST', // 调用post方法类型
        data: JSON.stringify({'amount': amount, 'apr': apr, 'installments': installments, 'startDate': startDate}), // 传参
        async: false, // false-异步
        beforeSend: function () {
            $("#loading").attr({"hidden": false});
        }, // beforeSend 调用前页面展示内容
        success: function (result) {
            // console.log(result);
            planInfoList = result;
            //先从DOM中获取表格元素对象
            var tbody = document.querySelector('tbody');
            //清空表格
            tbody.innerHTML = '';
            //通过返回试算数据，动态生成表格
            //循环获取每一行数据
            for (var i = 0; i < planInfoList.length; i++) {
                //通过DOM创建行元素并添加到tbody中
                var tr = document.createElement('tr');
                tbody.appendChild(tr);
                //通过DOM创建单元格元素并添加到tr中，并且通过innerHTML属性给单元格赋值
                var td_installment = document.createElement('td');
                tr.appendChild(td_installment);
                td_installment.innerHTML = planInfoList[i]['installmentNumber'];
                var td_prin = document.createElement('td');
                tr.appendChild(td_prin);
                td_prin.innerHTML = planInfoList[i]['chargeItemInfos'][0]['chargeAmount'];
                var td_int = document.createElement('td');
                tr.appendChild(td_int);
                td_int.innerHTML = planInfoList[i]['chargeItemInfos'][1]['chargeAmount'];
                var td_start_date = document.createElement('td');
                tr.appendChild(td_start_date);
                td_start_date.innerHTML = planInfoList[i]['installmentInterestStartDate'];
                var td_due_date = document.createElement('td');
                tr.appendChild(td_due_date);
                td_due_date.innerHTML = planInfoList[i]['dueDate'];

            }
        }  // success 异步调用成功后在页面填充内容
    });
});
$('#calculateClean').click(function () {
    var tbody = document.querySelector('tbody');
    //清空表格
    tbody.innerHTML = '';
});