js实现查找删除功能

秃头的男人

已于 2022-07-12 21:09:12 修改

阅读量524

点赞数

分类专栏： javaScript 文章标签：前端 javascript html

于 2022-07-12 20:55:35 首次发布

本文链接：https://blog.csdn.net/m0_62173626/article/details/125751483

版权

javaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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;
    }