Tolist表格添加及删除 可以实现留言板功能 动态添加留言
JS动态表格生成 后期可实现服务器数据动态添加到表格的功能 获取图片 等资源。
一.Tolist表格添加及删除实例
Tolist 实例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tolist案例</title>
</head>
<body>
<h1>请留言</h1>
<input type="text">
<ul></ul>
<script>
var comment = document.querySelector('input'); //获取 input 标签
var ul = document.getElementsByTagName('ul')[0];//获取 ul 标签
comment.focus();//获取焦点
comment.onkeydown = function (event) { //event 事件（？需要详细了解）
if (event.keyCode === 13){
var li = document.createElement('li');// 创建li标签
li.innerHTML = comment.value +'<a href="javascript:;" onclick="del(this)">删除</a>';
if (ul.chidElementCount === 0 ){
ul.appendChild(li);
}else{
var first = ul.firstElementChild; //UL 下面第一个元素
ul.insertBefore(li,first); //insertBefore（） 插入到元素前
}
comment.value = '' ; // 留言板清空
}
}
function del (ele){
if(confirm('是否删除？')){
var li = ele.parentNode;
//要找到被删除的元素的父节点，在它上面调用方法（只有领导有权利开会开除你）
li.parentNode.removeChild(li);
}
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
二. JS动态添加表格
JS动态添加表格 实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格的操作</title>
<style>
table,td,th {
border:1px solid red;
}
table {
width:500px;
border-collapse: collapse;
text-align: center;
}
/* :nth-of-type(1) 需要记下来*/
thead tr:nth-of-type(1) {
background-color: #ccc;
}
</style>
</head>
<body>
<table id="cart1">
<caption>购物车</caption>
<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>
<tr>
<td>4</td>
<td>电脑</td>
<td>1</td>
<td>6000</td>
</tr>
<hr>
</tbody>
</table>
<hr>
<table id="cart2">
<caption>购物车</caption>
<thead>
<tr>
<th>编号</th>
<th>品名</th>
<th>数量</th>
<th>单价</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
var cart1 = document.getElementById('cart1');//获取到表格
var data = [
{id:1,name:'苹果',count:1,price:30},
{id:2,name:'电脑',count:1,price:3000},
{id:3,name:'手机',count:1,price:5000}
]
var cart2 = document.getElementById('cart2'); //获取表格
var tbody =cart2.children[2]; //获取tbody
// 遍历数组data
data.forEach(function(value){
var tr = document.createElement('tr') ;//创建tr
// tr中加入数据
tr.innerHTML = '<td>'+ value.id +'</td>'; //插入数据到tr中 记得用 += 不覆盖
tr.innerHTML += '<td>'+ value.name +'</td>';
tr.innerHTML += '<td>'+ value.count +'</td>';
tr.innerHTML += '<td>'+ value.price +'</td>';
tbody.appendChild(tr); //把tr添加到 tbody中
})
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
总结：
Tolist ： 熟悉 获取焦点 focus() ， 创建元素标签 createElement() ， 添加到appendChild()
JS动态添加表格 ： 这个方法可以引用到 动态添加图片 等
熟悉：遍历数据 forEach（），innerHTML插入到用于插入html标签 innerText 用于插入文本 的使用 ，