实例
主要操作：查找html标签：children[] 添加html标签：appendChild() parentNode=>上一级html标签，removeChild()删除下一级标签
firstElementChild ：第一个子标签
var first = ul.firstElementChild ul.insertBefore(li, first) 在LI标签前添加一个LI标签；
<!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>Document</title>
</head>
<body>
<!---Tolist练习--->
<h3>留言板</h3>
<input type="text">
<ul> </ul>
<script>
/* 属性
children = > 获取全部的子元素
childNodes = >
childElementCount = >获取子节点数量
keyCode = >获取按键值
firstElementChild = >获取第一个子元素
方法
querySelector() = >获取满足条件的第一个元素
appendChild() = >添加一个子节点
insertBefore() = >在子节点前添加一个节点
focus() 获取焦点
*/
var comment = document.querySelector('input');
var ul = document.getElementsByTagName('ul')[0];
comment.focus();
comment.onkeydown = function (a) {
/*为什么这里的keyCode不能单独使用，非得传个参数给keyCode，如：keyCode === 13会报错*/
if (a.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(aabc) {
if (confirm('确认删除吗？')) {
var li = aabc.parentNode;
li.parentNode.removeChild(li);
}
}
</script>
<style>
table,
th,
td {
border: 1px solid lightcoral;
border-collapse: collapse;
}
table {
width: 400px;
text-align: center;
}
thead {
background-color: lightskyblue;
}
caption {
font-size: 1.2rem;
margin-bottom: 9px;
}
tbody {
font-size: 10pt;
}
td {
height: 30px;
}
th {
height: 25px;
}
</style>
<!---表格操作-->
<table id='tab1'>
<caption>表格一</caption>
<thead>
<tr>
<th>编号</th>
<th>品名</th>
<th>数量</th>
<th>价格</th>
<th>总价</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>手机</td>
<td>1</td>
<td>3000</td>
<td>3000</td>
</tr>
<tr>
<td>2</td>
<td>电脑</td>
<td>1</td>
<td>5000</td>
<td>5000</td>
</tr>
<tr>
<td>3</td>
<td>衣服</td>
<td>1</td>
<td>800</td>
<td>800</td>
</tr>
</tbody>
</table>
<script>
var table = document.getElementById('tab1');
var tbody = table.children[2];
var tr = table.children[2].children[0];
tbody.parentNode.removeChild(tbody);
var arr = [
{ 'id': 1, 'goods_name': '牛奶', 'count': 3, 'price': 15, 'count_price': 45 },
{ 'id': 2, 'goods_name': '面包', 'count': 5, 'price': 10, 'count_price': 50 },
];
arr.forEach(function (value) {
var tbody = document.createElement('tbody');
var tr = document.createElement('tr');
tr.innerHTML = '<td>' + value.id + '</td>';
tr.innerHTML += '<td>' + value.goods_name + '</td>';
tr.innerHTML += '<td>' + value.count + '</td>';
tr.innerHTML += '<td>' + value.price + '</td>';
tr.innerHTML += '<td>' + value.count*value.price + '</td>';
tbody.appendChild(tr);
table.appendChild(tbody);
})
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
