首先要明白什麼是模糊查詢（廢話又來了），就是根據關鍵字把列表中符合關鍵字的一項或某項羅列出來，也就是要檢查列表的每一項中是否含有關鍵字，因此抽象一下就是一個字元串中是否含有某個字元或者字元串。 以下例子沒有接觸到後臺數據的知識，只是查詢當前表格中每一行所包含的關鍵字。 用到的方法為：string.i ...
首先要明白什麼是模糊查詢（廢話又來了），就是根據關鍵字把列表中符合關鍵字的一項或某項羅列出來，也就是要檢查列表的每一項中是否含有關鍵字，因此抽象一下就是一個字元串中是否含有某個字元或者字元串。
以下例子沒有接觸到後臺數據的知識，只是查詢當前表格中每一行所包含的關鍵字。
用到的方法為：string.indexOf(''); 找出字元串中某個字元的位置，而如果沒有目標字元會返回-1。
實現代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="jquery-1.11.3.js"></script>
<script type="text/javascript">
$(function(){
// 當觸發回車事件 / 輸入查詢關鍵字改變時，調用dimSearch() 函數
$("#Result1 tr:eq(1)").find("input").each(function(){
$(this).keyup(function(){
$(this).val($(this).val().replace(/'/g,''));
if(event.keyCode == 13){
dimSearch();
return
}
})
$(this).change(function(){
$(this).val($(this).val().replace(/'/g,''));
dimSearch();
return;
})
})
function dimSearch(){
var accountNameStr = $("#accountNameStr").val().replace(/'/g, '');
var accountNoStr = $("#accountNoStr").val().replace(/'/g, '');
var accountShortStr = $("#accountShortStr").val().replace(/'/g, '');
var branchBankNoStr = $("#branchBankNoStr").val().replace(/'/g, '');
var branchBankNameStr = $("#branchBankNameStr").val().replace(/'/g, '');
var showTrs = $("#Result1 tr").eq(1).nextAll(); // 獲取需要查詢的所有tr
showTrs.each(function(){
if( $(this).find("td:eq(1)").text().indexOf(accountNameStr) > -1
&& $(this).find("td:eq(2)").text().indexOf(accountNoStr) >-1
&& $(this).find("td:eq(3)").text().indexOf(accountShortStr) > -1
&& $(this).find("td:eq(4)").text().indexOf(branchBankNoStr) > -1
&& $(this).find("td:eq(5)").text().indexOf(branchBankNameStr) > -1
){
$(this).show()
}else{
$(this).hide()
}
})
if( $("#Result1 tr").eq(1).nextAll("tr:visible").length == 0 ){
$("#Result1").append("<tr><td colspan='6' style='color: red'>沒有符合條件的記錄！</td></tr>")
}
}
})
</script>
</head>
<body>
<table id="Result1">
<tr>
<th></th>
<th>賬戶名稱</th>
<th>賬戶</th>
<th>戶名簡稱</th>
<th>開戶行號</th>
<th>開戶行名稱</th>
<th></th>
</tr>
<tr class="dim-check">
<td></td>
<td><input type="text" maxlength="50" id="accountNameStr" name="1" value=""></td>
<td><input type="text" maxlength="50" id="accountNoStr" name="2" value=""></td>
<td><input type="text" maxlength="50" id="accountShortStr" name="3" value=""></td>
<td><input type="text" maxlength="50" id="branchBankNoStr" name="4" value=""></td>
<td><input type="text" maxlength="50" id="branchBankNameStr" name="5" value=""></td>
</tr>
<tr>
<td><input type="radio" name="accounts" value="634"></td>
<td>安順賬號1</td>
<td>060156300000123</td>
<td>簡稱123</td>
<td>31375635312</td>
<td>中國銀行股份有限公司</td>
</tr>
<tr>
<td><input type="radio" name="accounts" value="634"></td>
<td>安順賬號2</td>
<td>0601001100000123</td>
<td>安順賬號2-簡稱123</td>
<td>3137565012</td>
<td>南京銀行股份有限公司</td>
</tr>
<tr class="">
<td><input type="radio" name="accounts" value="634"></td>
<td>安順賬號3</td>
<td>0601001154520123</td>
<td>安順賬號215</td>
<td>38968599012</td>
<td>建行有限公司</td>
</tr>
</table>
</body>
</html>
