<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>模拟搜素</title>
<link rel="stylesheet" href="" target="_blank" rel="external nofollow" >
<style type="text/css" media="screen">
*{
margin: 0;
padding: 0;
}
#box{
width: 500px;
margin: 300px auto;
}
.search{
float: left;
width: 360px;
height: 20px;
margin-right: 10px;
}
</style>
</head>
<body>
<div id="box">
<input class="search" id="text" type="text" name="" value="" placeholder="" />
<input type="button" name="" value="搜素" placeholder="">
</div>
</body>
<script type="text/javascript">
var keyWords = ["福建", "福州", "廈門", "泉州", "福清", "浙江", "上海", "上清"];
//擷取鍵盤擡起事件
document.getElementById("text").onkeyup =function(){
if (document.getElementById("dv")) {
document.getElementById("box").removeChild(document.getElementById("dv"));
}
//擷取輸入框的内容
var text = this.value;
//建立臨時數組 存放相應資料
var tempArry = [];
//輸入框内容與資料比對
for (var i = 0; i <keyWords.length ; i++) {
if (keyWords[i].indexOf(text)==0) {
//判斷輸入的是在數組中位于第一個的
tempArry.push(keyWords[i]);
console.log("keyWords[i]:"+keyWords[i]);
}
}
//如果文本框内容為空，或者資料不比對，不用建立div
if (this.value.length==0|| tempArry.length==0) {
//判斷頁面中有沒有這個div 有的話， 就删除
if (document.getElementById("dv")) {
document.getElementById("box").removeChild(document.getElementById("dv"));
}
return;
}
//建立div
var dvObj = document.createElement("div");
//将div添加到box中
document.getElementById("box").appendChild(dvObj);
dvObj.id='dv';
dvObj.style.width = "350px";
dvObj.style.border = "1px solid #000";
//周遊臨時數組，添加p标簽顯示
for (var j = 0; j < tempArry.length ; j++) {
var pObj = document.createElement("p");
//将p添加到dvObj中
dvObj.appendChild(pObj);
console.log("tempArry[j]:"+tempArry[j]);
pObj.innerText=tempArry[j];
}
}
</script>
</html>
![table表格的單元格的合并【colspan】和【rowspan】1、【colspan】合并行效果：代碼：2、【rowspan】合并列效果：[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)