一、ToList留言并添加删除功能
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ToList留言并添加删除功能</title>
</head>
<body>
<h3>留言板</h3>
<input type="text">
<ul></ul>
<script>
var text = document.getElementsByTagName('input')[0];
var ul = document.getElementsByTagName('ul')[0];
text.focus();
text.onkeydown = function (event) {
if (event.keyCode === 13) {
var li = document.createElement('li');
li.innerHTML = text.value + ' <a href="javascript:;" onclick="del(this)" style="color:red;text-decoration:none;">删除</a>';
if (ul.children.length === 0) {
ul.appendChild(li);
} else {
var first = ul.firstChild;
ul.insertBefore(li,first);
}
text.value = '';
}
}
function del(ele){
if(confirm('是否删除？')){
var li = ele.parentNode;
li.parentNode.removeChild(li);
}
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
二、多种方法实现使用JS动态数据表格
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>js表格的基本操作</title>
<style>
table,th,td {
border:1px solid #888;
}
table {
width: 500px;
border-collapse: collapse;
text-align: center;
}
table caption {
font-size: 1.2rem;
margin-bottom: 10px;
}
thead :nth-child(1) {
background-color: lightblue;
}
</style>
</head>
<body>
<table id="cart1">
<caption>购物车1</caption>
<thead>
<tr>
<th>编号</th>
<th>品名</th>
<th>数量</th>
<th>单价</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>华为手机</td>
<td>20</td>
<td>4000</td>
</tr>
<tr>
<td>2</td>
<td>小米手机</td>
<td>10</td>
<td>3000</td>
</tr>
<tr>
<td>3</td>
<td>苹果手机</td>
<td>15</td>
<td>7000</td>
</tr>
</tbody>
</table>
<hr>
<table id="cart2">
<caption>购物车2</caption>
<thead>
<tr>
<th>编号</th>
<th>品名</th>
<th>数量</th>
<th>单价</th>
</tr>
</thead>
<tbody></tbody>
</table>
<hr>
<table id="cart3">
<caption>购物车3</caption>
<thead>
<tr>
<th>编号</th>
<th>品名</th>
<th>数量</th>
<th>单价</th>
</tr>
</thead>
<tbody></tbody>
</table>
<script>
//购物车1
var cart1 = document.getElementById('cart1');
var xiaomi = cart1.children[2].children[1].children[1].innerHTML;
console.log(xiaomi);
var iphone = cart1.tBodies[0].rows[2].cells[1].innerHTML;
console.log(iphone);
//购物车2
var data = [
{id: 1, name: '苹果', count: 3, price: 6},
{id: 2, name: '香蕉', count: 5, price: 5},
{id: 3, name: '橘子', count: 7, price: 8},
{id: 4, name: '西瓜', count: 9, price: 12}
];
var cart2 = document.getElementById('cart2');
var tbody = cart2.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);
})
//购物车3，用table属性等重写上边案例
var cart3 = document.getElementById('cart3');
var tbody3 = cart3.tBodies[0];
for(i=0;i<data.length;i++){
var tr3 = document.createElement('tr');
Object.keys(data[i]).forEach(function(key){
tr3.innerHTML += '<td>' + data[i][key] + '</td>';
});
tbody3.appendChild(tr3);
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
三、心得体会：js需要学习了解的东西也听过的，后期得多写一些案例或者效果加深印象，加油。