ToList 实例
简单的留言板功能，留言，删除。
实例
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ToList</title>
</head>
<body>
<h3>请留言</h3>
<input type="text">
<ul>
</ul>
<script>
var coment = document.querySelector('input');
var ul = document.getElementsByTagName('ul')[0];
coment.focus();
//获取回车
coment.onkeydown = function(event){
if (event.keyCode===13){
var li = document.createElement('li');
li.innerHTML = coment.value + '<a herf="javascript:;" onclick="del(this)" >删除</a>';
//实现最新留言在最前面
if(ul.childElementCount===0){
ul.appendChild(li);
}else{
var first = ul.firstElementChild;
ul.insertBefore(li,first);
}
//清除输入框内容
coment.value='';
}
}
function del(ele){
if(confirm('是否删除？')){
//获取要删除的元素
var li = ele.parentNode;
//一定要找到被删除元素的父节点，在它上面调用删除方法
li.parentNode.removeChild(li);
}
return false;
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
用js自动生成表格
两种方法，感觉第二种不大好理解，还是第一种比较实用。
实例
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js操作表格基本技巧</title>
<style>
table,th,td{
border: 1px solid #666;
}
table {
width: 500px;
text-align: center;
border-collapse: collapse;
}
table caption {
font-size: 1.2rem;
margin-bottom: 15px;
}
thead tr:nth-of-type(1) {
background-color: lightblue;
}
</style>
</head>
<body>
<hr>
<table id="cart1">
<caption>购物车3</caption>
<thead>
<tr>
<th>编号</th>
<th>品名</th>
<th>数量</th>
<th>单价</th>
</tr>
</thead>
<tbody></tbody>
</table>
<script>
var data = [
{id: 1, name: '牛奶', count: 3, price: 50},
{id: 2, name: '苹果', count: 10, price: 80},
{id: 3, name: '衣服', count: 2, price: 600}
];
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);
})
/* var tbody = cart1.tBodies[0];
for (var i = 0; i<data.length;i++){
var tr = document.createElement('tr');
Object.keys(data[i]).forEach(function(key){
tr.innerHTML+='<td>'+data[i][key]+'</td>';
});
tbody.appendChild(tr); }
*/
</script>
</body></html>运行实例 »
点击 "运行实例" 按钮查看在线实例