html+javript表格数据增删操作加搜索效果

浏览：1188次- 评论：1次- 发布时间：2021-07-13

Html

Css

序号	姓名	年龄
1	张三	21
2	李四	20
3	刘三	23
4	abc	25

window.onload = function() {
    //var srt='abc 124 ert';
    //var arr=srt.split(' ');//用空格将srt切成一段一段的数组

var tab = document.getElementById('tab1');
    var input1 = document.getElementById('input');
    var input2 = document.getElementById('input2');
    var obtn = document.getElementById('btn1');
    var id = tab.tBodies[0].rows.length + 1;

obtn.onclick = function() {
        var otr = document.createElement('tr');
        var otd = document.createElement('td');
        otd.innerHTML = id++; //id删除之后永远不会再出现，防止id重用
        otr.appendChild(otd);

var otd = document.createElement('td');
        otd.innerHTML = input1.value;
        otr.appendChild(otd);

var otd = document.createElement('td');
        otd.innerHTML = input2.value;
        otr.appendChild(otd);

var otd = document.createElement('td');
        otd.innerHTML = '<a href="javascript:;">删除</a>';
        otr.appendChild(otd);
        otd.getElementsByTagName('a')[0].onclick = function() {
            tab.tBodies[0].removeChild(this.parentNode.parentNode);
        }
        tab.tBodies[0].appendChild(otr);
    };

var input = document.getElementById('input1');
    var btn = document.getElementById('btn');
    btn.onclick = function() {
        for (var i = 0; i < tab.tBodies[0].rows.length; i++) {
            var stab = tab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
            var stxt = input.value.toLowerCase();
            var arr = stxt.split(' ');
            tab.tBodies[0].rows[i].style.background = '';

for (var j = 0; j < arr.length; j++) {
                if (stab.search(arr[j]) != -1) {
                    tab.tBodies[0].rows[i].style.background = 'yellow';
                }

}
        }
    };
}

↑上面代码改变，会自动显示代码结果

jQuery调用版本：1.11.3