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" placeholder="请输入留言内容">
<ul></ul>
<script>
var comment = document.querySelector('input'); // 获取输入框的内容
var ul = document.getElementsByTagName('ul').item(0);
comment.focus();
comment.onkeydown = function (event) {
//当用户按下回车键时触发
if (event.keyCode === 13) {
var li = document.createElement('li');
// innerText不能解析文本中的html代码,要换成innerHTML
li.innerHTML = comment.value + '<a href="javascript:;" onclick="del(this)">删除</a>'; // 将删除按钮添加到留言内容的后面
//如果没有留言就新建一个li标签
if (ul.childElementCount === 0) {
ul.appendChild(li);
} else {
// 如果列表已有留言,则插入到新一条之前
var first = ul.firstElementChild;
ul.insertBefore(li,first);
}
// 清空留言区,并设置焦点
comment.value = '';
comment.focus();
}
};
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>
table,th,td{
border: 2px solid #c9cca7;
}
table {
width: 700px;
text-align: center;
border-collapse: collapse;
}
table caption {
font-size: 16px;
margin-bottom: 10px;
}
/* 这里必须在nth-of-type(1)前添加父元素,否则thead,tbody中的第一行都会生效 */
thead tr:nth-of-type(1) {
background-color: #beff7f;
}
</style>
</head>
<body>
<table id="cart1">
<caption>购物车1</caption>
<!-- 为防止作用js获取元素出错,我们手工添加上这个tbody -->
<!-- 将表头手工加上thead,否则会被添加二个tbody,因为table允许使用多个tbody -->
<thead>
<tr>
<th>编号</th>
<th>品名</th>
<th>数量</th>
<th>单价</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>小号</td>
<td>1</td>
<td>3000</td>
</tr>
<tr>
<td>2</td>
<td>长号</td>
<td>1</td>
<td>4000</td>
</tr>
<tr>
<td>3</td>
<td>大号</td>
<td>1</td>
<td>10000</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>
// 获取电脑和单价
var trombone = document.getElementById('cart1');
// 长号的位置
console.log(trombone.children[2].children[1].children[1].innerHTML);
// 长号的价格
console.log(trombone.children[2].children[1].children[3].innerHTML);
// 更新长号的价格 —— 3000
trombone.children[2].children[1].children[3].innerHTML = 3000;
/*
table对象定义一些属性,可以快速获取指定的子元素
1. tHead: <thea>
2. tBodies: <tbody>...复数
3. tFoot: <tfoot>
4. rows: 所有行
5. cells: 所有列
*/
console.log(trombone.tBodies[0].rows[1].cells[3].innerHTML);
var data = [
{id: 1, name: '98K', count: 1, price: 1050},
{id: 1, name: 'M24', count: 1, price: 2080},
{id: 1, name: 'AWM', count: 1, price: 30600}
];
var cart2 = document.getElementById('cart2');
// 获取到tbody
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);
});
var cart3 = document.getElementById('cart3');
var tbody = cart3.tBodies[0]; //获取所有tbody标签里面的内容
for (var i = 0; i < data.length; i++) {
var tr = document.createElement('tr'); //新建tr标签，里面存放data里面的内容
Object.keys(data[i]).forEach(function(key){
tr.innerHTML += '<td>' + data[i][key] + '</td>'; //将data里面的每一个对象里面的买一个数据填充到<td>标签里面
});
tbody.appendChild(tr);
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
