将json数据显示在table上，并对该数据进行简单的模糊搜索

假设有如下json数据：

var data = [
{"IMEI" : "001" , "s_name" : "学生卡1" , "in_order" : "第一批" , "in_date" : "2014-10-11"},
{"IMEI" : "002" , "s_name" : "学生卡2" , "in_order" : "第二批" , "in_date" : "2014-10-12"},
{"IMEI" : "003" , "s_name" : "教师卡1" , "in_order" : "第三批" , "in_date" : "2014-10-13"},
{"IMEI" : "004" , "s_name" : "教师卡2" , "in_order" : "第四批" , "in_date" : "2014-10-14"}
]

html代码如下：
<div class="app">
<form action="" method="" class="form-inline" role="form">
<div class="form-group">
<label for="keyword" class="sr-only">关键字</label>
关键字:<input type="text" name="keyword" id="keyword" class="form-control input-sm" style="width: auto;vertical-align: middle;" />
<select class="form-control input-sm">
<option id="card_s" value="学生卡">学生卡</option>
<option id="card_t" value="教师卡">教师卡</option>

</select>
<select class="form-control input-sm">
<option id="offer">供应商</option>
<option id="imei">IMEI</option>
<option id="number">入库批次</option>
<option id="date">入库时间</option>
</select>
<button class="btn btn-default btn-sm" type="button" onclick="search();">搜索</button>
</div>
</form>
<br/>
<table class="table-bordered table-striped table-hover" width="90%" id="table"/>
<thead>
<tr>
<th style="width:10%"><input type="checkbox" name="box0" id="box0" /></th>
<th style="width:20%">IMEI</th>
<th style="width:20%">商品名称</th>
<th style="width:20%">入库批次</th>
<th style="width:30%">入库时间</th>
</tr>
</thead>
<tbody id="tableBody"></tbody>
</table>
</div>

显示数据：
function showData(){
var tableBody = document.getElementById("tableBody");

for(var i = 0;i < data.length;i++){
var trTag = document.createElement("tr"); //创建tr标签
trTag.id = i + 1;<span style="white-space:pre"> </span>//为tr标签创建id属性
tableBody.appendChild(trTag); //创建的tr标签添加到tableBody上
}

//在新建的每个tr标签内循环增加td标签
var trBody = document.getElementById("tableBody").getElementsByTagName("tr");
for(var j = 0;j < data.length;j++){
trBody[j].innerHTML = "<td><input type='checkbox' name='' id='' /></td>"
+ "<td
4000
>" + data[j].IMEI + "</td>"
+ "<td>" + data[j].s_name + "</td>"
+ "<td>" + data[j].in_order + "</td>"
+ "<td>" + data[j].in_date + "</td>";
}

}<pre name="code" class="javascript">window.onload = function(){
showData();
}

模糊搜索1（点击搜索按钮搜索，js实现方式有点笨，待优化）

function search(){
var searchContent = document.getElementById("keyword").value;
var trBody = document.getElementById("tableBody").getElementsByTagName("tr");
var card_s = document.getElementById("card_s");
var card_t = document.getElementById("card_t");
if(searchContent == ""){
showData();
}
else{
//没有结果显示空
for(var j = 0;j < data.length;j++){
trBody[j].innerHTML = "";
}

//历遍json文件找出匹配的数值并输出相应的行(模糊查找)
for(var x in data){
//学生卡搜索
if(data[x].s_name.indexOf(card_s.value) != -1 && card_s.selected){
if(data[x].IMEI.indexOf(searchContent) != -1){
trBody[x].innerHTML = "<td><input type='checkbox' name='' id='' /></td>"
+ "<td>" + data[x].IMEI + "</td>"
+ "<td>" + data[x].s_name + "</td>"
+ "<td>" + data[x].in_order + "</td>"
+ "<td>" + data[x].in_date + "</td>";
}
else if(data[x].s_name.indexOf(searchContent) != -1 ){
trBody[x].innerHTML = "<td><input type='checkbox' name='' id='' /></td>"
+ "<td>" + data[x].IMEI + "</td>"
+ "<td>" + data[x].s_name + "</td>"
+ "<td>" + data[x].in_order + "</td>"
+ "<td>" + data[x].in_date + "</td>";
}
else if(data[x].in_order.indexOf(searchContent) != -1){
trBody[x].innerHTML = "<td><input type='checkbox' name='' id='' /></td>"
+ "<td>" + data[x].IMEI + "</td>"
+ "<td>" + data[x].s_name + "</td>"
+ "<td>" + data[x].in_order + "</td>"
+ "<td>" + data[x].in_date + "</td>";
}
else if(data[x].in_date.indexOf(searchContent) != -1){
trBody[x].innerHTML = "<td><input type='checkbox' name='' id='' /></td>"
+ "<td>" + data[x].IMEI + "</td>"
+ "<td>" + data[x].s_name + "</td>"
+ "<td>" + data[x].in_order + "</td>"
+ "<td>" + data[x].in_date + "</td>";
}
}
//教师卡搜索
else if(data[x].s_name.indexOf(card_t.value) != -1 && card_t.selected){
if(data[x].IMEI.indexOf(searchContent) != -1){
trBody[x].innerHTML = "<td><input type='checkbox' name='' id='' /></td>"
+ "<td>" + data[x].IMEI + "</td>"
+ "<td>" + data[x].s_name + "</td>"
+ "<td>" + data[x].in_order + "</td>"
+ "<td>" + data[x].in_date + "</td>";
}
else if(data[x].s_name.indexOf(searchContent) != -1 ){
trBody[x].innerHTML = "<td><input type='checkbox' name='' id='' /></td>"
+ "<td>" + data[x].IMEI + "</td>"
+ "<td>" + data[x].s_name + "</td>"
+ "<td>" + data[x].in_order + "</td>"
+ "<td>" + data[x].in_date + "</td>";
}
else if(data[x].in_order.indexOf(searchContent) != -1){
trBody[x].innerHTML = "<td><input type='checkbox' name='' id='' /></td>"
+ "<td>" + data[x].IMEI + "</td>"
+ "<td>" + data[x].s_name + "</td>"
+ "<td>" + data[x].in_order + "</td>"
+ "<td>" + data[x].in_date + "</td>";
}
else if(data[x].in_date.indexOf(searchContent) != -1){
trBody[x].innerHTML = "<td><input type='checkbox' name='' id='' /></td>"
+ "<td>" + data[x].IMEI + "</td>"
+ "<td>" + data[x].s_name + "</td>"
+ "<td>" + data[x].in_order + "</td>"
+ "<td>" + data[x].in_date + "</td>";
}
}
}
}
}


模糊搜索2（在搜索栏输入后即完成搜索）
function goSearch(s){
var trBody = document.getElementById("tableBody").getElementsByTagName("tr");
for(var i = 0;i < trBody.length;i++){
var td = trBody[i].getElementsByTagName("td");
//在每一行的每列中查找
for(var j = 0;j < td.length;j++){
if(td[j].innerHTML.indexOf(s) == -1){
trBody[i].style.display = "none"; //相应行隐藏
}
else{
trBody[i].style.display = "";
break; //**找到符合则中断循环**
}
}
}