在工作中遇到查询某些数据，并添加到一个列表里的时候，写了一个小功能。
优点：
1.纯手工JS代码，不需要任何js框架，复制下来就能测试，无毒副作用。
2.通过模糊查询快速定位数据，并添加到列表里。
缺点：
由于在实现过程中使用了全局的setInterval函数，有可能性能会下降。
关于数据的获取可以用AJAX实时调用填充。
本人抱着平和的心态接受任何大神小神提出关于性能和代码实现的改进意见～.～
----------------------------------------------不华丽的分割线，以下为源代码---------------------------------------------------------
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
var isShow = true;
var table, DataDiv, Txt, txtValue, rows, i;
window.onload = function () {
DataDiv = document.getElementById("DataDiv");
Txt = document.getElementById("Txt");
table = document.getElementById("tb-list");
//100毫秒执行一次ShowData()
self.setInterval("showData()", 100);
}
//显示数据
function showData() {
txtValue = Txt.value;
//txt为空就隐藏DataDiv，并return方法
if (txtValue == "") {
DataDiv.style.display = "none";
return;
}
DataDiv.style.display = "block";
rows = table.getElementsByTagName("tr");
for (i = 1; i < rows.length; i++) {
if (IsHave(rows[i].cells[1].innerHTML, txtValue) < 0) {
isShow = false;
if (IsHave(rows[i].cells[2].innerHTML, txtValue) < 0) {
isShow = false;
if (IsHave(rows[i].cells[3].innerHTML, txtValue) < 0) {
isShow = false;
}
else isShow = true; }
else isShow = true; }
else isShow = true; if (isShow) {
rows[i].style.display = "";
}
else {
rows[i].style.display = "none";
}
}
}
//判断某列中是否包含文本框中的关键字
function IsHave(Str, subString) {
if (subString == "") {
return 1;
}
else {
return Str.indexOf(subString);
}
}
//添加到已选列表中
function AddPeople(obj) {
var i = obj.parentNode.parentNode.rowIndex;
var currentrow = document.getElementById("tb-list").rows[i];
var people = new Object();
people.name = currentrow.cells[1].innerText;
people.phone = currentrow.cells[2].innerText;
people.address = currentrow.cells[3].innerText; var table = document.getElementById("selectedData");
var rowcount = table.rows.length;
var row = table.insertRow(rowcount);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3); cell1.innerHTML = people.name;
cell2.innerHTML = people.phone;
cell3.innerHTML = people.address;
cell4.innerHTML = "<a href='#' onclick='DelTable(this)'>×</a>";
}
//删除已选列表里的某项
function DelTable(obj) {
var i = obj.parentNode.parentNode.rowIndex;
var table = document.getElementById("selectedData");
if (confirm("您是否确认删除此人！")) {
table.deleteRow(i);
}
}
</script>
<style type="text/css">
*
{
font-size: 14px;
margin: 0px;
padding: 0px;
font-family: 微软雅黑;
border: none;
outline: none;
text-decoration: none;
}
#DataDiv
{
width: 500px;
display: none;
border-top: 1px solid #a5b6ca;
border-left: 1px solid #a5b6ca;
position: absolute;
top: 40px;
left: 5px;
background-color: #ffffff;
} #DataDiv1
{
width: 500px;
border-top: 1px solid #a5b6ca;
border-left: 1px solid #a5b6ca;
margin: 5px;
margin-top: 200px;
}
table
{
width: 100%;
}
table td
{
border-bottom: 1px solid #a5b6ca;
border-right: 1px solid #a5b6ca;
}
#Txt
{
border: 1px solid #bbbbbb;
height: 25px;
border-radius: 4px;
color: #414141;
padding: 0px 7px 0px 7px;
margin: 5px;
}
</style>
</head>
<body>
<input id="Txt" type="text" />
<div id="DataDiv">
<table id="tb-list" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
序号
</td>
<td>
姓名
</td>
<td>
电话
</td>
<td>
住址
</td>
<td>
操作
</td>
</tr>
<tr>
<td>
1
</td>
<td>
王西徽
</td>
<td>
18632085200
</td>
<td>
任县
</td>
<td>
<a href="javascript:;" onclick="AddPeople(this)">+</a>
</td>
</tr>
<tr>
<td>
2
</td>
<td>
郭XX
</td>
<td>
18612345678
</td>
<td>
邢台市
</td>
<td>
<a href="javascript:;" onclick="AddPeople(this)">+</a>
</td>
</tr>
<tr>
<td>
3
</td>
<td>
张XX
</td>
<td>
18666664444
</td>
<td>
石家庄市
</td>
<td>
<a href="javascript:;" onclick="AddPeople(this)">+</a>
</td>
</tr>
<tr>
<td>
4
</td>
<td>
王XX
</td>
<td>
18633445566
</td>
<td>
石家庄市
</td>
<td>
<a href="javascript:;" onclick="AddPeople(this)">+</a>
</td>
</tr>
<tr>
<td>
5
</td>
<td>
赵XX
</td>
<td>
18611112222
</td>
<td>
邢台市
</td>
<td>
<a href="javascript:;" onclick="AddPeople(this)">+</a>
</td>
</tr>
<tr>
<td>
6
</td>
<td>
李XX
</td>
<td>
18600002222
</td>
<td>
邢台市
</td>
<td>
<a href="javascript:;" onclick="AddPeople(this)">+</a>
</td>
</tr>
</table>
</div>
<div id="DataDiv1">
<table id="selectedData" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
姓名
</td>
<td>
电话
</td>
<td>
住址
</td>
<td>
操作
</td>
</tr>
</table>
</div>
</body>
</html>