主要还是要记住一些提取的代码，加进来的代码、删除的代码，还有学会用console，看里面的排序结构。
tolist实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tolis留言、增加删除功能的实现</title>
<style>
body{background-color: seashell;}
ul{list-style-type:none;font-size:25px; color: brown;}
.hander{text-align: center;}
</style>
</head>
<body class="hander">
<h3>请给我们的设计师留言吧！</h3>
<br>
<input type="text" size="50"; >
<ul></ul>
<script>
var comment=document.querySelector('input');
var ul=document.getElementsByTagName('ul')[0];
comment.focus();
comment.onkeydown=function(event){
if(event.keyCode===13){
var li=document.createElement('li');
li.innerHTML=comment.value+'<a href="javascript:;" onclick="del(this)">滚出去</a>';
if(ul.childElementCount===0){
ul.appendChild(li);
}else{
var first=ul.firstElementChild;
ul.insertBefore(li,first);
}
comment.value=''/*清空留言*/
}
}
function del(ele){
if(confirm('你确定要让我滚吗？')){
var li= ele.parentNode;
li.parentNode.removeChild(li);
}
return false;
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
用js创建表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js动态一张表格 数据用数组</title>
<style>
body{width:1000px; height: 500px; margin-left:25%; background-color: salmon;}
table,td,th{border:2px solid rebeccapurple;}
table{width: 700px; border-collapse: collapse;text-align: center;margin-left:150px; }
table caption{font-size:50px; margin-bottom: 20px;}
thead tr:nth-of-type(1){background-color: sienna;}
</style>
</head>
<body>
<table id="biaoge">
<caption>我的购物清单</caption>
<thead>
<tr>
<th>序号</th>
<th>名称</th>
<th>数量</th>
<th>价格</th>
</tr>
</thead>
<tbody></tbody>
<div class="footter"></div>
</table>
<script>
var date=[
{id:1, name:'糌粑', count:55.5, price:80},
{id:2, name:'八国', count:25.5, price:28},
{id:3, name:'卓溪', count:38, price:11},
{id:4, name:'加吧', count:99, price:55}
];
var biaoge=document.getElementById('biaoge');
var tbody=biaoge.children[2];
//遍历对象数组
date.forEach(function(value){
var tr=document.createElement('tr');
tr.innerHTML= '<td>'+value.id+'</tr>'
tr.innerHTML+= '<td>'+value.name+'</tr>'
tr.innerHTML+= '<td>'+value.count+'</tr>'
tr.innerHTML+= '<td>'+value.price+'</tr>'
tbody.appendChild(tr);
})
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
