Javascript 基于搜索文本框显示/隐藏行_Javascript_Jquery_Asp.net Mvc_Asp.net Mvc 3_Razor

Javascript 基于搜索文本框显示/隐藏行

javascript jquery asp.net-mvc asp.net-mvc-3 razor

Javascript 基于搜索文本框显示/隐藏行,javascript,jquery,asp.net-mvc,asp.net-mvc-3,razor,Javascript,Jquery,Asp.net Mvc,Asp.net Mvc 3,Razor,我试图实现以下效果，行已经出现在页面上，所以我想是关于jquery语法的，但我对jquery还不是很在行它只是不起作用，是的，jquery库也包括在内 Filter: <input type="text" id="FilterTextBox" name="FilterTextBox" /> <script language="javascript" type="text/javascript"> $(document).ready(function () {

我试图实现以下效果，行已经出现在页面上，所以我想是关于jquery语法的，但我对jquery还不是很在行

它只是不起作用，是的，jquery库也包括在内

Filter: <input type="text" id="FilterTextBox" name="FilterTextBox" />
<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        //add index column with all content.
        $(".filterable tr:has(td)").each(function () {
            var t = $(this).text().toLowerCase(); //all row text
            $("<td class='indexColumn'></td>")
    .hide().text(t).appendTo(this);
        }); //each tr
        $("#FilterTextBox").keyup(function () {
            var s = $(this).val().toLowerCase().split(" ");
            //show all rows.
            $(".filterable tr:hidden").show();
            $.each(s, function () {
                $(".filterable tr:visible .indexColumn:not(:contains('"
          + this + "'))").parent().hide();
            }); //each
        }); //key up.
    }); //document.ready

</script>


<table class="filterable">
    <tr>
        <th>
            name
        </th>
        <th>
            yearsExperienceRequired
        </th>
        <th>
            Actions
        </th>
          <th>
            Index Column
        </th>
    </tr>

@foreach (var item in Model) {
    <tr class="indexColumn">
        <td>
            @Html.DisplayFor(modelItem => item.name)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.yearsExperienceRequired)
        </td>
         <td>
            @Html.DisplayFor(modelItem => item.name)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.PositionID }) |
            @Html.ActionLink("Details", "Details", new { id = item.PositionID }) |
            @Html.ActionLink("Delete", "Delete", new { id = item.PositionID })
        </td>
    </tr>
}

</table>

过滤器：
$（文档）.ready（函数（）{
//添加包含所有内容的索引列。
$（“.filterable tr:has（td）”）。每个（函数（）{
var t=$（this）.text（）.toLowerCase（）；//所有行文本
$("")
.hide（）.text（t）.appendTo（this）；
})；//每个tr
$（“#过滤器文本框”）.keyup（函数（）{
var s=$（this.val（）.toLowerCase（）.split（“”）；
//显示所有行。
$（“.filterable tr:hidden”）.show（）；
$。每个功能（）{
$（“.filterable tr:visible.indexColumn:not（：contains（”）
+这是“+”））”.parent（）.hide（）；
})；//每个
})//把钥匙锁上。
}); //准备好了吗
名称
需要一年的经验
行动
索引列
@foreach（模型中的var项目）{
@DisplayFor（modelItem=>item.name）
@DisplayFor（modelItem=>item.yearsExperienceRequired）
@DisplayFor（modelItem=>item.name）
@ActionLink（“编辑”，“编辑”，新的{id=item.PositionID}）|
@ActionLink（“详细信息”，“详细信息”，新的{id=item.PositionID}）|
@ActionLink（“删除”，“删除”，新的{id=item.PositionID}）
}

生成的HTML如下所示：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>Index</title>

    <link href="/Content/Site.css" rel="stylesheet" type="text/css" />



</head>

<body>

    <div class="page">

        <header>

            <div id="title">

                <h1>Eva 1.0</h1>

            </div>

            <div id="logindisplay">

                    Welcome <strong>eva</strong>!

    [ <a href="/Account/Register">Register New User</a> ]

    [ <a href="/Account/LogOff">Log Off</a> ]

    [ <a href="/Account/ChangePassword">Change Password</a> ]





            </div>



            <nav>

                <ul id="menu">                    

                        <li> <a href="/">DashBoard</a></li>                        

                        <li> <a href="/Position">Positions</a> </li>

                        <li> <a href="/UserPositionPosition/Position">Prospects</a> </li>

                        <li> <a href="/UserPositionPosition/Position">Prospect History</a> </li>

                        <li> <a href="/UserPositionPosition/Position">Technical Interview</a> </li> 

                        <li> <a href="/UserPositionPosition/Position">Manager Interview</a> </li> 

                        <li> <a href="/UserPositionPosition/Position">Current Employees</a> </li>

                        <li> <a href="/UserPositionPosition/Position">Current Employees History</a> </li>

                </ul>

            </nav>

        </header>

        <section id="main">









<h2>Index</h2>



<p>

    <a href="/Position/Create">Create New</a>  



</p>



Filter: <input type="text" id="FilterTextBox" name="FilterTextBox" />

<script language="javascript" type="text/javascript">

    $(document).ready(function () {

        //add index column with all content.

        $(".filterable tr:has(td)").each(function () {

            var t = $(this).text().toLowerCase(); //all row text

            $("<td class='indexColumn'></td>").hide().text(t).appendTo(this);

        }); //each tr

        $("#FilterTextBox").keyup(function () {

            var s = $(this).val().toLowerCase().split(" ");

            //show all rows.

            $(".filterable tr:hidden").show();

            $.each(s, function () {

                $(".filterable tr:visible .indexColumn:not(:contains('"+ this + "'))").parent().hide();

            }); //each

        }); //key up.

    }); //document.ready


</script>





<table class="filterable">

    <tr>

        <th>

            name

        </th>

        <th>

            Years of Experience Required

        </th>

        <th>

            Index Column

        </th>

        <th>

            Actions

        </th>

    </tr>



    <tr class="indexColumn">

        <td>

            .net developer

        </td>

        <td>

            5

        </td>

         <td>

            .net developer

        </td>

        <td>

            <a href="/Position/Edit/1">Edit</a> |

            <a href="/Position/Details/1">Details</a> |

            <a href="/Position/Delete/1">Delete</a>

        </td>

    </tr>

    <tr class="indexColumn">

        <td>

            java developer

        </td>

        <td>

            5

        </td>

         <td>

            java developer

        </td>

        <td>

            <a href="/Position/Edit/2">Edit</a> |

            <a href="/Position/Details/2">Details</a> |

            <a href="/Position/Delete/2">Delete</a>

        </td>

    </tr>



</table>



        </section>

        <footer>

        </footer>

    </div>

    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.4.min.js" type="text/javascript"></script>





    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js" type="text/javascript"></script>

    <script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>



</body>

</html>


指数
Eva 1.0
欢迎伊娃！
[  ]
[  ]
[  ]










指数


过滤器：
$（文档）.ready（函数（）{
//添加包含所有内容的索引列。
$（“.filterable tr:has（td）”）。每个（函数（）{
var t=$（this）.text（）.toLowerCase（）；//所有行文本
$（“”）.hide（）.text（t）.appendTo（this）；
})；//每个tr
$（“#过滤器文本框”）.keyup（函数（）{
var s=$（this.val（）.toLowerCase（）.split（“”）；
//显示所有行。
$（“.filterable tr:hidden”）.show（）；
$。每个功能（）{
$（“.filterable tr:visible.indexColumn:not（：contains（““+this+”））”））））。parent（）.hide（）；
})；//每个
})//把钥匙锁上。
}); //准备好了吗
名称
需要多年的工作经验
索引列
行动
.net开发人员
5.
.net开发人员
|
|
java开发人员
5.
java开发人员
|
|

当我在JS-bin中测试你的代码时，一切都正常

您可以在右角编辑它
他确实警告过你的电话线断了

$(".filterable tr:visible .indexColumn:not(:contains('" + this + "'))").parent().hide();
但那可能是因为我刚刚从这里复制粘贴了代码
可能的修复

您以前的javascript文件可能会被缓存。尝试CTRL+F5对所有内容进行完全刷新

尝试将代码从视图中分离出来，然后再试一次，因为这在这里似乎很好

添加一个
警报（t）或控制台（t）在此函数中：
这将显示放入IndexColumn中的值。若他并没有显示您的任何值，那个么jquery中的for都有问题 $(".filterable tr:has(td)").each(function () { var t = $(this).text().toLowerCase(); //all row text //alert(t); or console(t); here $("<td class='indexColumn'></td>") .hide().text(t).appendTo(this); }); $（“.filterable tr:has（td）”）。每个（函数（）{ var t=$（this）.text（）.toLowerCase（）；//所有行文本 //警报（t）；或控制台（t）；此处 $("") .hide（）.text（t）.appendTo（this）； }); 这不应该如此困难，有人请帮忙吗？警报甚至没有执行，请检查HTML生成的代码，可能是因为对.JS的引用在文件末尾吗？我听说这是最好的做法@Kevin Coett应该首先加载正式的jquery内容。所以，把所有这些放在头上，它就会起作用：）检查