根据指定的结构和数据动态创建表格

结构如下：

<table border=1 width="500">
    <thead>
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>成名绝技</th>
        </tr>
    </thead>
    <tbody>
        
    </tbody>
</table>

数据如下：

var arr = [
    {
        name:"令狐冲",
        age:20,
        sex:"男",
        skill:"独孤九剑"
    },
    {
        name:"东方不败",
        age:50,
        sex:"女",
        skill:"葵花宝典"
    },
    {
        name:"任我行",
        age:55,
        sex:"男",
        skill:"吸星大法"
    }
];

最终效果如下：

代码：

// 根据结果分析，最终需要3个tr，因为数组中有3个元素，所以遍历数组来创建tr
// 定义最终存放所有内容字符串的变量
var html = '';
// 遍历数组
for(var i=0;i<arr.length;i++){
    // 拼接tr开头 - 最终会拼接3次
    html += '<tr>'
        // 每个tr中拼接第一个td
        html += '<td>'
            // td中拼接内容
            html += i+1 // 序号是 下标+1
        html += '</td>'
        // 每个tr中拼接第二个td
        html += '<td>'
            html += arr[i].name // 姓名是当前遍历的 对象.name
        html += '</td>'
        // 每个tr中拼接第三个td
        html += '<td>'
            html += arr[i].age // 年龄是当前遍历的 对象.age
        html += '</td>'
        // 每个tr中拼接第四个td
        html += '<td>'
            html += arr[i].sex // 性别是当前遍历的 对象.sex
        html += '</td>'
        // 每个tr中拼接第五个td
        html += '<td>'
            html += arr[i].skill // 成名绝技是当前遍历的 对象.skill
        html += '</td>'
    // 拼接tr结尾，最终会拼接3次
    html += '</tr>'
}
// 将拼接好的所有内容放到tobody中
document.querySelector('tbody').innerHTML = html