javascript - 検索テキストボックスに基づいて行を表示/非表示

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

私は次の効果を実行しようとしています、行は既にページに存在しているので、jquery構文についての何かだと思いますが、私はまだjqueryについてあまりスマートではありません。

http://kobikobi.wordpress.com/2008/09/15/using-jquery-to-filter-table-rows/

機能していません。はい、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>


生成される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>
答え
JS binでコードをテストすると、すべてが機能しています。

http://jsbin.com/ipobiz

右隅で編集できます。

彼はあなたの改行について警告を出しました

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


でも、それはたぶん、ここからコードをコピーして貼り付けただけだからです。

可能な修正


以前のJavaScriptファイルがキャッシュされている可能性があります。すべてを完全に更新するには、CTRL + F5を試してください。
ビューからコードを分離してもう一度試してください。ここでは問題なく動作するようです。
この関数にalert(t);またはconsole(t);を追加します。


これにより、IndexColumnに入力された値が表示されます。彼があなたの値のいずれも表示しない場合は、jqueryのfor eachに問題があります。

$(".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); 
        }); 
関連記事

java - Java Scripting Engineクラスのインスタンス化

javascript - ScrollToスクリプトでスクロールするときにページのちらつき/途切れを防ぐ方法はありますか?

javascript - iframeを取得するための正しいJavaScript関数とは

javascript - JavaScriptでのXMLのクエリ

javascript - javascript:WebForm_DoPostBackWithOptionsをデバッグするにはどうすればよいですか?

javascript - Rhino JSインタープリターとSpiderMonkeyインタープリター-異なる戻り値

javascript - jQueryを使用して<head>からすべての<meta ..>を読み取るにはどうすればよいですか?

javascript - 私の最初のWebアプリケーションを構築するための優れたリソース(おそらく、純粋なHTML5 / Javascript / CSS3を使用するだけ)

javascript - ページコンテンツがAjaxで読み込まれた後にJavaScriptを読み込む

javascript - jquery編集可能テーブル:特定のセルを編集可能にするにはどうすればよいですか?