dom 练习题8（生成表格）_dom生成5行5列表格,并将其对角单元格都绘制成红色。提示:可以用代-CSDN博客

本文链接：https://blog.csdn.net/qq_45827064/article/details/106174256

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>title</title>
    <style>
        th {
            width: 100px;
            background: pink;
        }
    </style>
</head>

<body>
    <div>
        <input type="text" value="" id="uname" />
        <br/> 请输入邮箱:
        <input type="text" value="" id="email" />

        <input type="button" value="tijiao " id="bu">
    </div>
    <table>
        <tr>
            <th>xingming</th>
            <th>banji</th>
        </tr>
        //charu
    </table>
</body>
<script>
    var bu = document.getElementById('bu')
    bu.onclick = function() {
        if (iii.chu()) {
            iii.chuu()
        }

    }


    iii = {
        chu: function() {
            var nu = document.getElementById('uname')
            var nuu = document.getElementById('email')
            if (nu.value == '' || nuu.value == '') {
                alert('请将数据填入完全')
                return false;
            }
            return true;
        },
        chuu: function() {
            var nu = document.getElementById('uname')
            var nuu = document.getElementById('email')
            var table = document.getElementsByTagName('table')
            console.log(table)
            var table = table[0]
            var th = document.createElement('th')
            console.log(th)
            th.innerText = nu.value
            var thh = document.createElement('th')

            thh.innerText = nuu.value
            console.log(thh)
            var tr = document.createElement('tr')
            tr.appendChild(th)
            tr.appendChild(thh)
            console.log(tr)
            console.log(table)
            table.appendChild(tr)
        }
    }
</script>

</html>