<!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>
<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>