总结（制作流程）：
在制作ToList之前，首先清楚自己实现的每一个功能，然后在进行操作
1、html+css布局
2、通过js获取input的value值，同时通过if判断确认input是否有内容输入，有则给ul添加li标签，将input的value通过在键盘按回车后传至ul下的li标签中，无责返回
3、传值到li标签中后，input中的value值应该清空
4、通过js判断当前li标签如果只有一个直接添加，如果出现第二个添加在第一个之前而不是之后
5、给li标签增加删除与撤回功能
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>经典ToList</title>
</head>
<body>
<h1>请留言</h1>
<input type="text">
<ul></ul>
<script>
var input = document.getElementsByTagName('input')[0]
input.focus()
var ul = document.getElementsByTagName('ul')[0]
input.onkeydown = function (event){
if(event.keyCode === 13) {
if(input.value === '') {
alert('请输入有效内容')
} else {
var li = document.createElement('li')
if(ul.childElementCount === 0){
ul.appendChild(li)
} else {
var first = ul.firstElementChild
ul.insertBefore(li,first)
}
li.innerHTML = input.value + '<a href="javascript:;" onclick="del(this)">删除</a> <a href="javascript:;" onclick="back(this)">撤回<a/>'
input.value = ''
}
}
}
function del(ele) {
if(confirm('是否删除')){
var li = ele.parentNode
li.parentNode.removeChild(li)
}
return false
}
function back(ele) {
if(confirm('是否撤回')) {
var li = ele.parentNode
input.value = li.firstChild.nodeValue
li.parentNode.removeChild(li)
}
return false
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html lang="en">
<style>
table,th,td {
border: solid #000 1px;
}
table {
width: 500px;
border-collapse: collapse;
text-align: center;
}
caption {
font-size: 1.2rem;
margin-bottom: 15px;
}
thead tr:nth-last-of-type(1) {
background-color: aqua
}
</style>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table id="cart1">
<caption>购物车</caption>
<thead>
<tr>
<th>编号</th>
<th>品名</th>
<th>数量</th>
<th>单价</th>
</tr>
</thead>
<tbody></tbody>
</table>
<script>
var data = [
{id:1,name:'apple',count:3,price:100},
{id:2,name:'car',count:10,price:20},
{id:3,name:'banana',count:5,price:50}
]
var cart1 = document.getElementById('cart1')
var tbody = cart1.children[2]
data.forEach(function (value){
var tr = document.createElement('tr')
tr.innerHTML = '<td>'+value.id+'</td>'
tr.innerHTML += '<td>'+value.name+'</td>'
tr.innerHTML += '<td>'+value.count+'</td>'
tr.innerHTML += '<td>'+value.price+'</td>'
tbody.appendChild(tr)
})
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
