原生js动态生成表格，隔行变色，双击修改表格内容并且同步修改二维数组，将数组打印

本文链接：https://blog.csdn.net/weixin_43788115/article/details/106101834

嘤嘤嘤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table tbody tr:hover{
            background: yellowgreen;
        }
        table tbody tr td:hover{
            background: orange;
        }
        .one {
            background: #ccc;
        }
        .two {
            background: gray;
        }
    </style>
</head>
<body>
    <table border="1" cellpadding="5" cellspacing="0">
        <thead>
            <td>id</td>
            <td>姓名</td>
            <td>年龄</td>
            <td>地址</td>
        </thead>
        <tbody ondblclick="getOnce()"></tbody>
        <tfoot>
            <td colspan="4">尾部</td>
        </tfoot>
    </table>
</body>
<script>
    // 表格数据
    let tableDate = [
        {
            id: 1,
            name: '小明',
            age: 18,
            address: '深圳市宝安区'
        },
        {
            id: 2,
            name: '小红',
            age: 18,
            address: '深圳市南山区'
        },
        {
            id: 3,
            name: '小美',
            age: 19,
            address: '深圳市罗湖区'
        }
    ]
    initTable()
    // 点击表格事件
    function getOnce() {
        let td = event.srcElement
        let id = td.dataset.id
        let val = td.dataset.val
        let key = td.dataset.key
        td.innerHTML = `
            <input type="text" value="${val}" class="formInput" data-id="${id}" data-key="${key}">
        `
        // 改变输入框事件
        let inputOnce = document.querySelector('.formInput') 
        inputOnce.focus()
        inputOnce.onchange = function() {
            let info = tableDate.find(v => v.id == this.dataset.id)
            let index = tableDate.indexOf(info)
            tableDate[index][this.dataset.key] = this.value
            initTable()
            console.log(tableDate)
        }
        inputOnce.onblur = function() {
            let info = tableDate.find(v => v.id == this.dataset.id)
            let index = tableDate.indexOf(info)
            tableDate[index][this.dataset.key] = this.value
            initTable()
            console.log(tableDate)
        }
    }
    // 初始化表格内容
    function initTable() {
        let tBody = document.querySelector('tbody')
        let str = ''
        let className = ''
        for(let i = 0,len = tableDate.length;i < len; i+=1) {
            if(i % 2 == 0) {
                className = 'one'
            }else {
                className = 'two'
            }
            str += `
                <tr class="${className}">
                    <td data-val="${tableDate[i].id}" data-id="${tableDate[i].id}" data-key="id">
                        ${tableDate[i].id}
                    </td>
                    <td data-val="${tableDate[i].name}" data-id="${tableDate[i].id}" data-key="name">
                        ${tableDate[i].name}
                    </td>
                    <td data-val="${tableDate[i].age}" data-id="${tableDate[i].id}" data-key="age">
                        ${tableDate[i].age}
                    </td>
                    <td data-val="${tableDate[i].address}" data-id="${tableDate[i].id}" data-key="address">
                        ${tableDate[i].address}
                    </td>
                </tr>
            `
            tBody.innerHTML = str
        }
    }
</script>
</html>