js动态创建表格

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
</style>
<body>
    <!-- 1. 根据指定的结构和数据动态创建表格

    结构如下：
 
    ```html
 
    ```
 
    数据如下：
 
    ```js
   ;   -->
    <table border=1 width="500">
        <thead>
            <tr id="a">
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>成名绝技</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</body>
<script>
    //动态创建表格
    var arr = [
        {
        name:"令狐冲",
        age:20,
        sex:"男",
        skill:"独孤九剑"
        },
        {
        name:"东方不败",
        age:50,
        sex:"女",
        skill:"葵花宝典"
        },
        {
        name:"任我行",
        age:55,
        sex:"男",
        skill:"吸星大法"
        }
    ]
    /*var str ='';
    for(var i=0;i<arr.length;i++){
            var obj = arr[i]
            str +="<tr><td>" + (i+1) +"</td><td>" + obj.name + "</td><td>" + obj.age + "</td><td>" + obj.sex + "</td><td>" + obj.skill + "</td><td>" + "删除" + "</td></tr>"
        }*/
    var str = ''
    for(var i=0; i<arr.length; i++) {
        var obj = arr[i]
        str += '<tr>'
            str += '<td>'
                str += i+1
            str += '</td>'
            str += '<td>'
                str += obj.name
            str += '</td>'
            str += '<td>'
                str += obj.age
            str += '</td>'
            str += '<td>'
                str += obj.sex
            str += '</td>'
            str += '<td>'
                str += obj.skill
            str += '</td>'
            str += '<td>'
                str += '删除'
            str += '</td>'
        str += '</tr>'
    }
        var tbody = document.querySelector('tbody');
        tbody.innerHTML = str;
</script>
</html>

效果图：点击删除可删除

 

posted @ 2022-04-20 01:00  包歌  阅读(90)  评论(0)    收藏  举报