实例1.经典的Tolist
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>经典的Tolist</title>
</head>
<body>
<h3>简单留言本</h3>
<input type="text">
<ul></ul>
<script>
var liuyan = document.querySelector('input');/*获取input*/
var ul = document.getElementsByTagName('ul')[0];/*获取ul标签*/
liuyan.focus(); /*打开页面就让焦点在表单中*/
liuyan.onkeydown = function (event) {
/*当对表单按下键盘按键时，执行函数*/
if (event.keyCode === 13) {
/*如果按下的是回车键，则执行*/
console.log(liuyan.value);
/*在控制台输出表单中内容*/
var li = document.createElement('li');
/*创建一个li元素*/
li.innerHTML = liuyan.value;
/*将表单内容添加到li元素中*/
if (ul.childElementCount === 0) {
/*判断ul元素中是否为空*/
ul.appendChild(li);
/*如果ul元素是为空，则在ul元素中插入子元素li*/
} else {
/*如果ul元素中有子元素，则*/
var first = ul.firstElementChild;
/*先获取当前ul的最靠前的子元素*/
ul.insertBefore(li, first);
/*将li元素插入到最前面*/
}
liuyan.value = '';
/*表单内容清空*/
}
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例2.JS操作表格（chroem控制台中查看）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS操作表格</title>
<style>
table, td, th {
border: 1px solid #666;
}
table {
width: 500px;
border-collapse: collapse;
text-align: center;
}
table caption {
font-size: 1.2rem;
margin-bottom: 15px;
}
thead tr:nth-child(1) {
background-color: #cccccc;
}
</style>
</head>
<body>
<table id="tab1">
<caption>购物车1</caption>
<thead>
<tr>
<td>编号</td>
<td>品名</td>
<td>数量</td>
<td>单价</td>
</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>
<script>
var tab1 = document.getElementById('tab1');
/*获取表格*/
console.log(tab1.children[2].children[1].children[1].innerText);
/*获取表格中的元素,children中获取元素，用数组表示 */
console.log(tab1.children[2].children[1].children[3].innerText);
tab1.children[2].children[1].children[3].innerText = 8000;
console.log(tab1.children[2].children[1].children[3].innerText);
/*表格有专用的调用属性*/
/*
table对象定义一些属性,可以快速获取指定的子元素
1. tHead: <thea>
2. tBodies: <tbody>...复数
3. tFoot: <tfoot>
4. rows: 所有行
5. cells: 所有列
*/
console.log(tab1.tBodies[0].rows[1].cells[1].innerText);
tab1.tBodies[0].rows[1].cells[1].innerHTML = '<span style="color: #f00;">电脑</span>';
// tab1.tBodies[0].rows[1].cells[1].innerText = '<span style="color: #f00;">电脑</span>';
/*innerHTML可以读取元素值，也可以赋值，如果包含html标签的话，会解析成html格式，innerText只会原文显示*/
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例3.JS动态生成表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS动态生成表格</title>
</head>
<style>
table, td, th {
border: 1px solid #666;
}
table {
width: 500px;
border-collapse: collapse;
text-align: center;
}
table caption {
font-size: 1.2rem;
margin-bottom: 15px;
}
thead tr:nth-child(1) {
background-color: #cccccc;
}
</style>
<body>
<table id="tab1">
<caption>购物车1</caption>
<thead>
<tr>
<td>编号</td>
<td>品名</td>
<td>数量</td>
<td>单价</td>
</tr>
</thead>
<tbody></tbody>
</table>
<script>
var data = [
{id: 1, name: '牛奶', count: 3, print: 50},
{id: 2, name: '苹果', count: 10, print: 80},
{id: 3, name: '车厘子', count: 3, print: 150}
]
/*创建对象数组*/
console.log(data);
/*读取数组*/
console.log(data[1].name);
console.log(data[1].count);
console.log(data[1].print);
/*读取数组中的内容*/
var tab1 = document.getElementById('tab1');
var tbody = tab1.children[2];
/*先拿到表格的tbody*/
console.log(tbody);
/*forEach遍历对象数组,参数必须是函数，value是遍历数组中的值*/
data.forEach(function (value) {
var tr = document.createElement('tr');
//createElement生成一个tr存放到变量tr中
/*+=是追加，不会将前面的数据给覆盖掉*/
tr.innerHTML = '<td>' + value.id + '</td>';
tr.innerHTML += '<td>' + value.name + '</td>';
tr.innerHTML += '<td>' + value.count + '</td>';
tr.innerHTML += '<td>' + value.print + '</td>';
tbody.appendChild(tr);
})
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
