实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<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;
}
/* 这里必须在nth-of-type(1)前添加父元素,否则thead,tbody中的第一行都会生效 */
thead tr:nth-of-type(1) {
background-color: lightblue;
}
</style>
<body>
<table id="cart1">
<caption>购物车1</caption>
<!-- 注: 浏览器会自动给以下内容添加一个tbody容器 -->
<!-- 为防止作用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>5000</td>
</tr>
<tr>
<td>3</td>
<td>手机</td>
<td>1</td>
<td>3000</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>
</body>
<script>
var cart1 = document.getElementById('cart1');//获取cart1结构
console.log(cart1.children[2].children[1].children[1].innerHTML)
console.log(cart1.children[2].children[1].children[3].innerHTML)
console.log(cart1.tBodies[0].rows[1].cells[3].innerHTML);
</script>
<script>
var data = [
{id: 1, name: '牛奶', count: 3, price: 50},
{id: 1, name: '苹果', count: 10, price: 80},
{id: 1, name: '衣服', count: 2, price: 600}
];
var cart2 =document.getElementById('cart2');//获取这个购物车结构
var tbody = cart2.children[2];//获取tbody
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>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h3>请留言</h3>
<input type="text"><!--获取表单-->
<ul></ul>
</body>
<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");
li.innerHTML = comment.value + '<a href="javascript:;" onclick="del(this)">删除</a>';
if(ul.childrenElementCount===0){
ul.appendChild(li);
}else{
var first =ul.firstElementChild;
ul.insertBefore(li,first);
}
comment.value = '';
comment.focus();
}
}
</script>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
