作业1、一个简单的留言本功能 熟悉DOM的添加删除操作
其中学习到了新的函数 :
prepend 和 insertBefore 功能类似 在指定位置插入数据
append 和 appendChild 功能类似 添加数据到指定对象里面
parentElement 获取父元素
remove 删除函数
event 事件 keycode 键值代码 使用方式为 evenet.code 获取当前用户键盘输入的按键代码
key 和 code 还是可以分开使用 分别不用的按键代码格式
实例
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>tolist-用户留言</title>
</head>
<body>
<label for="comment">请留言:</label>
<input type="text" id="comment" autofocus onkeydown="addComment(this)">
<ul id="list">
</ul>
<script>
function addComment(comment) {
if (event.keyCode === 13){
var list = document.getElementById('list');
var li = document.createElement('li');
li.innerHTML = comment.value;
li.innerHTML += ' <button onclick="del(this)">删除</button>';
if (list.childElementCount ===0 ){
list.append(li);
} else{
// list.insertBefore(li,list.firstElementChild);
list.prepend(li,list.firstElementChild);
}
}
}
function del(ete) {
ete.parentElement.remove(ete);
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
作业2、创建一个对象数组 并利用js函数添加到表格里面
学习到了直接获取表格的命令函数
Thead 获取头部
Tbodies 获取类容
Tfoot 获取底部
返回的全部为复数需要加[]号来访问 和children用法类似 前者可以更直接的获取到需要找的元素.
Object.keys 获取当前数组的键名
document.createElement 在当前页面创建一个对象 创建完毕后 该元素属于一个碎片形式 页面中不会显示
实例
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>js操作表格的基本操作</title>
<style>
table,th,td{
border: 1px solid #666;
border-collapse: collapse;
}
table{
width: 500px;
text-align: center;
/*border-collapse: collapse;*/
}
table caption{
font-size: 1.2rem;
margin-bottom: 15px;
}
thead{
background-color: lightblue;
}
</style>
</head>
<body>
<table id="cart1">
<caption>表格标题</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>
<table id="cart2">
<caption>表格标题</caption>
<!--表格头部-->
<thead>
<tr>
<td>编号</td>
<td>品名</td>
<td>数量</td>
<td>单价</td>
</tr>
</thead>
<!--表格内容-->
<tbody>
</tbody>
</table>
<table id="cart3">
<caption>表格标题</caption>
<!--表格头部-->
<thead>
<tr>
<td>编号</td>
<td>品名</td>
<td>数量</td>
<td>单价</td>
<td>操作</td>
</tr>
</thead>
<!--表格内容-->
<tbody>
</tbody>
</table>
<script>
var cart1 =document.getElementById('cart1');
// thead
// tBodies
// tfoot
// rows
// cells
// cart1.tBodies[0].rows[1].innerHTML
var data = [
{id: 1, name: '牛奶', count: 3, price: 50},
{id: 2, name: '苹果', count: 10, price: 80},
{id: 3, name: '衣服', count: 2, price: 600}
];
// var cart2 =document.getElementById('cart2');
// tbody = cart2.tBodies[0];
//
// 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.append(tr)
//
// })
var cart3 =document.getElementById('cart3');
tbody = cart3.tBodies[0];
for (var i = 0; i < data.length; i++) {
var tr = document.createElement('tr');
Object.keys(data[i]).forEach(function (value) {
tr.innerHTML += '<td>' + data[i][value] + '</td>';
});
tr.innerHTML += '<td><button>删除</button></td>';
tbody.append(tr)
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例