用另一种动态创建表格的方法实现无评论刷新(insertRow(-1)-insertCell(-1))

最新推荐文章于 2025-06-15 09:12:32 发布

原创最新推荐文章于 2025-06-15 09:12:32 发布 · 276 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#用另一种动态创建表格的方法实现无评论刷新(insertRow(-1)-

Javascript、JQuery练习专栏收录该内容

69 篇文章

订阅专栏

本文介绍了一个使用HTML和JavaScript创建的简单互动表格示例。该表格允许用户输入昵称和评论，然后将这些信息实时添加到表格中，展示了基本的网页动态更新功能。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
</head>
<body>
    <table id="table1" border="1">
        <tr>
            <td>猫猫：</td>
            <td>沙发耶！</td>
        </tr>
    </table>
   <label>昵称：</label>
    <input id="txt1"/>
    <div>
        <textarea id="txt2"></textarea>
    </div>
    <button id="btn">评论</button>
    <script type="text/javascript">
        window.onload = function () {
            document.getElementById('btn').onclick = function () {
                var userName = document.getElementById('txt1').value;
                var comment = document.getElementById('txt2').value;
                var table = document.getElementById('table1');
                var tr = table.insertRow(-1);
                tr.insertCell(-1).innerHTML = userName+':';
                tr.insertCell(-1).innerHTML = comment;
            };
        };
    </script>
</body>
</html>