html+javript实现表格的添加删除搜索

Html

Css

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

table {
	width:800px;
	text-align:center;
	margin-top:10px;
}
#input,#input1,#input2 {
	width:150px;
	outline:none;
}
a {
	text-decoration:none;
}

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

立即下载

html+javript实现表格的添加删除搜索



代码描述：自动生成ID添加表格内容，点击按钮删除添加项，可以进行模糊搜索关键词搜索等

更新时间：2021-07-08 11:56:56
var arr=srt.split(' '); 用空格将srt切成一段一段的数组；
var id=tab.tbodies[0].rows.length+1; otd.innerhtml=id++; //id删除之后永远不会再出现，防止id重用

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

勋章??

相关代码

html+javript实现表格的添加删除搜索

最新