Fatal编程技术网
  • javascript/
  • Javascript 如何在html表格中搜索任意列？

Javascript 如何在html表格中搜索任意列？

javascript jquery html asp.net-mvc-4

Javascript 如何在html表格中搜索任意列？,javascript,jquery,html,asp.net-mvc-4,Javascript,Jquery,Html,Asp.net Mvc 4,我想使用任何列（如标题、开始日期或可见等）筛选或搜索此表 现在我的代码按第一列“Title”搜索，但我不能在所有列中搜索 这正是我想要的 <div> <label> Search:<input type="text" id="Search" onkeyup="myFunction()" placeholder="search for performance"> </label> </div> <ta

我想使用任何列（如标题、开始日期或可见等）筛选或搜索此表 现在我的代码按第一列“Title”搜索，但我不能在所有列中搜索 这正是我想要的

<div>
    <label>
        Search:<input type="text" id="Search" onkeyup="myFunction()" placeholder="search for performance">
    </label>
</div>
<table id="PerformanceTable" class="table table-bordered table-striped">

    <tr>
        <th>
            Title
        </th>
        <th>
            Start Date
        </th>
        <th>
            Booking
        </th>
        <th>
            Visible
        </th>
        <th>
            Featured
        </th>
        <th>
            Event
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Views)
        </th>
        <th></th>
    </tr>
</table>
<script>
    function myFunction() {
        // Declare variables
        var input, filter, table, tr, td, i;
        input = document.getElementById("Search");
        filter = input.value.toUpperCase();
        table = document.getElementById("PerformanceTable");
        tr = table.getElementsByTagName("tr");

        // Loop through all table rows, and hide those who don't match the        search query
        for (i = 0; i < tr.length; i++) {
            td = tr[i].getElementsByTagName("td")[0];
            if (td) {
                if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
                    tr[i].style.display = "";
                } else {
                    tr[i].style.display = "none";
                }
            }
        }

    }</script>


搜索：
标题
开始日期
预订
看得见的
作为特色的
事件
@DisplayNameFor（model=>model.Views）
函数myFunction（）{
//声明变量
var输入、过滤器、表格、tr、td、i；
输入=document.getElementById（“搜索”）；
filter=input.value.toUpperCase（）；
table=document.getElementById（“PerformanceTable”）；
tr=table.getElementsByTagName（“tr”）；
//循环遍历所有表行，并隐藏与搜索查询不匹配的行
对于（i=0；i-1）{
tr[i].style.display=“”；
}否则{
tr[i].style.display=“无”；
}
}
}
}

您需要遍历所有可用的
td
s。但是当你找到匹配的时候一定要打破。示例代码如下：

// Declare variables
var input, filter, table, tr, td, i ;
input = document.getElementById("Search");
filter = input.value.toUpperCase();
table = document.getElementById("PerformanceTable");
tr = table.getElementsByTagName("tr"),
th = table.getElementsByTagName("th");

// Loop through all table rows, and hide those who don't match the        search query
for (i = 1; i < tr.length; i++) {
            tr[i].style.display = "none";
            for(var j=0; j<th.length; j++){
        td = tr[i].getElementsByTagName("td")[j];      
        if (td) {
            if (td.innerHTML.toUpperCase().indexOf(filter.toUpperCase()) > -1)                               {
                tr[i].style.display = "";
                break;
            }
        }
    }
}

//声明变量
var输入、过滤器、表格、tr、td、i；
输入=document.getElementById（“搜索”）；
filter=input.value.toUpperCase（）；
table=document.getElementById（“PerformanceTable”）；
tr=table.getElementsByTagName（“tr”），
th=table.getElementsByTagName（“th”）；
//循环遍历所有表行，并隐藏与搜索查询不匹配的行
对于（i=1；i
删除
.getElementsByTagName（“td”）[]

for循环应如下所示：

for（i=1；i-1）{
tr[i].style.display=“”；
}否则{
tr[i].style.display=“无”；
}
}
}
您必须通过
tr[i]进行迭代。getElementsByTagName（“td”）
collectioni现在有2个错误1）由于日期原因无法读取大写字母2）无法读取indexof（）@hindmostShow您的更改现在只需为（i=0；i