js实现无刷新评论

最新推荐文章于 2019-08-06 15:12:00 发布

Sunqlive

最新推荐文章于 2019-08-06 15:12:00 发布

阅读量1.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： js 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/Sunqlive/article/details/52351704

js 专栏收录该内容

10 篇文章

订阅专栏

这篇博客展示了如何使用JavaScript实现在不刷新页面的情况下，采集用户输入的昵称和评论内容，并动态创建新的表格行展示在评论表格中，提供了一个简单的无刷新评论功能的实例。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js练习6</title>
<script type="text/javascript">
window.onload = function () {
document.getElementById('btn1').onclick = function () {
//1.采集用户输入的数据
var user_name = document.getElementById('txtNickName').value;
var content = document.getElementById('txtContent').value;
//2.动态创建行
var trLine = document.createElement('tr');

var td1 = document.createElement('td');
td1.innerHTML = user_name;

var td2 = document.createElement('td');
td2.innerHTML = content;

trLine.appendChild(td1);
trLine.appendChild(td2);
//将行加到表格中
document.getElementById('tblComments').appendChild(trLine);

}
};
</script>
</head>
<body>
<table id="tblComments" border="1">
<tr>
<td>
猫猫：
</td>
<td>
沙发耶！
</td>
</tr>
</table>

<textarea style="width:300px;height:200px;" id="txtContent"></textarea><br />
昵称：<input type="text" id="txtNickName"/>
<input type="button" value="评论 " id="btn1"/>
</body>
</html>