将json数据导入表格

最新推荐文章于 2023-10-29 16:17:39 发布

一条小咸鱼i

最新推荐文章于 2023-10-29 16:17:39 发布

阅读量1.2k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/Crush_kylin/article/details/103728285

版权

前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script src="js/jquery-1.7.2.js"></script>
    <link type="text/css" rel="stylesheet" href="css/table.css"/>
    <title></title>
</head>
<body>
<button id="btn_dete" onclick="delSelect();">删除选中</button>
<table border="1">
    <thead>
    <tr>
        <td>编号</td>
        <td>选择</td>
        <td>邮箱</td>
        <td>职位</td>
        <td>工资</td>
        <td>登记时间</td>
        <td>学校</td>
        <td>姓名</td>
        <td>联系电话</td>
        <td>身份证号</td>
        <td>年龄</td>
        <td>性别</td>
        <td>操作</td>
    </tr>
    </thead>
    <tbody id="aj_data">

    </tbody>
</table>
<p>平均工资为：<p id="avgsal"></p></p>
<p>平均年龄为：<p id="avgage"></p></p>
</body>
</html>
<script>

    //导入json数据，动态生成表格
    $(document).ready(function () {
        $.get("data/personinfo.json", function(data){
            var emp = data.data;
            var tableHtml = "";
            //计算总工资
            var sum = 0;
            var sumage = 0;
            for(var i=0;i<emp.length;i++){
                var id = i+1;
                tableHtml += "<tr>";
                tableHtml +=    "<td>"+ id +"</td>";
                tableHtml +=    "<td>"+ "<input type='radio'>" +"</td>";
                tableHtml +=    "<td>"+ emp[i].email +"</td>";
                tableHtml +=    "<td>"+ emp[i].position_name +"</td>";
                tableHtml +=    "<td>"+ emp[i].salary +"</td>";
                //将字符串乐行转为数字
                sum += Number(emp[i].salary);
                tableHtml +=    "<td>"+ emp[i].createtime +"</td>";
                tableHtml +=    "<td>"+ emp[i].school +"</td>";
                tableHtml +=    "<td>"+ emp[i].name +"</td>";
                tableHtml +=    "<td>"+ emp[i].tel +"</td>";
                tableHtml +=    "<td>"+ emp[i].idnum +"</td>";
                var year1 = emp[i].idnum.substr(6,4);
                var year2 = new Date().getFullYear();
                var year = year2-year1;
                tableHtml +=    "<td>"+ year +"</td>";
                sumage += Number(year);
                if(emp[i].sex==0){
                    tableHtml +=    "<td>"+ "男" +"</td>";
                }else{
                    tableHtml +=    "<td>"+ "女" +"</td>";
                }
                var butn_id = "button"+i;
                tableHtml +=    "<td>"+ "<button onclick='del(this)' id="+butn_id+">删除</button>" +"</td>";
                //使用this将当前button对象 传入到函数del中
                tableHtml += "</tr>";
            }

            //将拼接后的表格数据tbody
            $("#aj_data").html(tableHtml);
            //给奇数行添加点颜色
            $("tr:odd").css("background-color","#ecff91");
            //将平均工资写入p1
            var avgsal = sum/emp.length;
            document.getElementById("avgsal").innerHTML=avgsal;
            //将平均年龄写入p2
            var avgage = sumage/emp.length;
            document.getElementById("avgage").innerHTML=avgage;
        });
    })

function del(but) {
    var button1 =document.getElementById(but.id);
    var tbody = document.getElementsByTagName("tbody");
    tbody[0].removeChild(button1.parentNode.parentNode);
}

function delSelect() {
        var inp = document.getElementsByTagName("input");
        for(var i = 0;i<inp.length;i++){
            while (inp[i].checked){
                var tbody = document.getElementsByTagName("tbody");
                tbody[0].removeChild(inp[i].parentNode.parentNode);
            }
        }
}


</script>