js html 最简单实现按按钮出现图标

小小笛。

于 2022-07-05 19:00:05 发布

阅读量1k

点赞数

分类专栏：前端文章标签： javascript html5

本文链接：https://blog.csdn.net/qq_43476381/article/details/125626019

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <button id="button"  οnclick="n()">添加一个信息</button>
    <table border="solid 2px black">
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>年级</th>
            <th>爱好</th>
            <th>自我介绍</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>黄某</td>
            <td>女</td>
            <td>18</td>
            <td>三年级</td>
            <td>吃，玩</td>
            <td>自我介绍</td>
            <td>
                <button>修改</button>
                <button>删除</button>
            </td>
        </tr>
    </table>
    <div id="show"></div>
    <script>
        function n(){
            document.getElementById("show").innerHTML='<table border="solid 2px black"><tr>' +
                '<td>姓名:</td><td><input type="text"/></td></tr>' +
                '<tr><td>性别:</td><td><input type="radio">男<input type="radio">女</td></tr>' +
                '<tr><td>年龄</td><td><input type="text"></td></tr>' +
                '<tr><td>爱好</td><td><input type="checkbox">吃<input type="checkbox">喝</td></tr>' +
                '<tr><td>自我介绍</td><td><textarea></textarea></td></tr></table>';
        }
    </script>
</body>

</html>