ToList留言并添加删除功能案例
涉及属性:
children 获取所有的子元素
childNodes 获取所有的子节点 包括文本节点
childElementCount 获取当前所有的子节点的数量
keyCode 检测键盘所按的键
firstElementChild 获取到第一个子元素
涉及的方法
querySelector()获取满足条件的第一个元素
getElementsByTagName()获取文档中的标签
appendChild() 在父节点上添加一个子节点
insertBefore() 在某一个子节点前插入一个节点
focus() 给某个元素设置焦点
parentNode 获取某一个节点的父节点
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ToList留言并添加删除功能</title>
</head>
<body>
<input type="text" placeholder="填写留言并按回车键">
<ul></ul>
<script>
var cuent=document.getElementsByTagName('input')[0];
var ul=document.getElementsByTagName('ul')[0];
cuent.focus();
cuent.onkeydown =function (event){
if(event.keyCode==13){
var li=document.createElement('li');
li.innerHTML=cuent.value+" <a href='javascript:;' style='color:red' onclick='del(this)'>删除</a>";
if(ul.childElementCount === 0){
ul.appendChild(li);
}else{
var first=ul.firstElementChild;
ul.insertBefore(li,first);
}
cuent.value='';
}
}
function del(aaa){
if(confirm('确定删除吗')){
var li=aaa.parentNode;
//console.log(li);
li.parentNode.removeChild(li);
}
return false;
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
使用JS动态一张表格,数据用数组进行模拟
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用JS动态一张表格</title>
<style>
#cat{ width: 400px; height: 200px;border-collapse: collapse; text-align: center;}
#cat caption{ color: chocolate; font-size: 20px; font-weight: bold;}
table ,th ,td{border: 1px solid #999; }
</style>
</head>
<body>
<table id="cat">
<!-- 表格标题 -->
<caption>学生成绩表</caption>
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>科目</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
var arr=[
{id:1,name:'小明',sex:'男',course:'语文',grade:90},
{id:2,name:'小应',sex:'女',course:'数学',grade:80},
{id:3,name:'小放',sex:'男',course:'英语',grade:70},
{id:4,name:'小花',sex:'女',course:'生物',grade:60}
];
var tbody=document.getElementById('cat').children[2];
arr.forEach(function(value){
var tr=document.createElement('tr');
tr.innerHTML='<td>'+value.id+'</td>';
tr.innerHTML+='<td>'+value.name+'</td>';
tr.innerHTML+='<td>'+value.sex+'</td>';
tr.innerHTML+='<td>'+value.course+'</td>';
tr.innerHTML+='<td>'+value.grade+'</td>';
tbody.appendChild(tr);
})
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例