html代码
<body>
查找:
<input type="text" id="chaz">
<button onclick="tj()">提交</button>
<table border="1" cellspacing="0" id="htm"></table>
</body>
js代码
var arr = [
{
name: '小红',
age: 18,
neir: '5468484'
}, {
name: '小蓝',
age: 18,
neir: '123'
}, {
name: '小丽',
age: 18,
neir: '5468484'
},
]
//遍历数据
function fun() {
let html = ''
for (let i = 0; i < arr.length; i++) {
html += '<tr>'
html += '<td>' + arr[i].name + '</td>'
html += '<td>' + arr[i].age + '</td>'
html += '<td>' + arr[i].neir + '</td>'
html += '<td><button onclick="sc(' + i + ') ">删除</button><button onclick="ck(' + i + ') ">查看</button></td>'
html += '<tr>'
}
document.getElementById('htm').innerHTML = html
}
fun()
//查找
function tj() {
let id = document.getElementById('chaz').value
let html = ''
arr.map(function (item, index) {
if (item.name == id || item.age == id || item.neir == id) {
html += '<tr>'
html += '<td>' + item.name + '</td>'
html += '<td>' + item.age + '</td>'
html += '<td>' + item.neir + '</td>'
html += '<td><button onclick="sc(' + index + ') ">删除</button><button onclick="ck(' + index + ') ">查看</button></td>'
html += '<tr>'
}
})
document.getElementById('chaz').value = ''
document.getElementById('htm').innerHTML = html
}
//删除
function sc(i) {
arr.splice(i, 1)
fun()
}
css样式
table {
border-collapse: collapse;
font-family: Futura, Arial, sans-serif;
}
caption {
font-size: larger;
margin: 1em auto;
}
th,
td {
padding: .65em;
}
th {
background: #555 nonerepeat scroll 0 0;
border: 1px solid #777;
color: #fff;
}
td {
border: 1px solid#777;
}