JS输入实时匹配表格中数据


<meta charset="utf-8">
<title>JS输入实时匹配表格中数据</title>
<script type="text/javascript">
function func() {
    if(form1.input1.value.length<=0 
    ||null==form1.input1.value.length){
        return;
    }
    
    var tabx=document.getElementById("table1");
    for (var i=0; i<tabx.rows.length; i++) {
        var tdx=tabx.rows[i].cells[0].innerHTML.toUpperCase();
        var inputx1=form1.input1.value.toUpperCase();
        if (tdx == inputx1) {
            tabx.rows[i].style.display='table-row';
        } 
        else {
            tabx.rows[i].style.display='none';
        }
        if (tdx.search(inputx1) != -1) {
            tabx.rows[i].style.display='table-row';
        } 
        else {
            tabx.rows[i].style.display='none';
        }
    }
}
</script>

<form name="form1">
JS实时匹配输入的数据
<input type="text" name="input1" onKeyUp="func();" onMouseDown="func();" />
</form>

<table border="1" id="table1">
<tr style="display:none;"><td>Blue</td></tr>
<tr style="display:none;"><td>boss</td></tr>
<tr style="display:none;"><td>bus</td></tr>
<tr style="display:none;"><td>book</td></tr>
<tr style="display:none;"><td>but</td></tr>
<tr style="display:none;"><td>Mikyou</td></tr>
<tr style="display:none;"><td>moon</td></tr>
<tr style="display:none;"><td>mousr</td></tr>
<tr style="display:none;"><td>weak</td></tr>
<tr style="display:none;"><td>sky</td></tr>
<tr style="display:none;"><td>say</td></tr>
<tr style="display:none;"><td>see</td></tr>
</table>







程序运行结果如下,点击这里亲自运行看看