html代码:
<input type="text" id="age" placeholder="请输入年龄">
<input type="text" id="sex" placeholder="请输入性别">
<button id="btn">添加</button>
<table>
<thead>
<tr>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>操作</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
css代码:
<style>
table {
width: 800px;
height: 600px;
border-collapse: collapse;
text-align: center;
margin: 100px auto;
}
td {
border: 1px solid #000;
}
</style>
JavaScript代码:
<script src="./js/utils.js"></script>
<script>
var arr = [
{
name: "传奇",
age: 20,
sex: "男"
},
{
name: "传奇",
age: 20,
sex: "男"
},
{
name: "传奇",
age: 20,
sex: "男"
}
]
var tbody = document.querySelector("tbody")
function createfn() {
tbody.innerHTML = ""
arr.forEach(function (item, index) {
var tr = document.createElement("tr")
for (var key in item) {
var td = document.createElement("td")
td.innerText = item[key]
tr.appendChild(td)
}
tr.innerHTML += "<td class='del' index='" + index + "'>删除</td>"
tbody.appendChild(tr)
})
}
createfn()
on(tbody, "click", function (e) {
if (e.target.nodeName === "TD" && e.target.className === "del") {
var res = e.target.getAttribute("index")
arr.splice(res, 1)
// e.target.get
createfn()
}
})
on(my$("btn"), "click", function () {
var obj = {
name: (my$("xing").value),
age: (my$("age").value),
sex: (my$("sex").value)
}
arr.push(obj)
createfn()
})
</script>
以下是封装的JavaScript utils里所用方法
//这个是获取DOM元素的id 装入函数my$里
function my$(id) {
return document.getElementById(id)
}
添加事件监听
@param ele DOM元素
@param type 事件类型
@param callback 回调函数 事件处理函数
*/
//主要是浏览器事件监听兼容问题
addEventListener ==>是ie8以上和非ie使用的事件监听方式
attachEvent ==>是ie8及以下浏览器事件监听方法
function on(ele, type, callback) {
if (ele.addEventListener) {
if (type.indexOf("on") === 0) {
type = type.slice(2)
}
ele.addEventListener(type, callback)
} else {
if (type.indexOf("on") !== 0) {
type = "on" + type
}
ele.attachEvent(type, callback)
}
}
以下为实现效果:
添加效果:
删除效果: