0

私はjavascriptとjqueryを使い始めたばかりで、すべてについて無知です。

これは、モデルから変換された私のjsonです

changeData = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model));

内容は次のようになります。

changeData = [ 
{"RemoteRoute":{"Id":1,"Code":"1","Name":"Route1a","Outward":true,"Detail":null},"LocalRoute":null,"Change":"New"}, 
{"RemoteRoute":{"Id":1,"Code":"1","Name":"Route1b","Outward":false,"Detail":null},"LocalRoute":null,"Change":"New"}, 
{"RemoteRoute":{"Id":2,"Code":"2","Name":"Route2a","Outward":true,"Detail":null},"LocalRoute":null,"Change":"New"}, 
{"RemoteRoute":{"Id":2,"Code":"2","Name":"Route2b","Outward":false,"Detail":null},"LocalRoute":null,"Change":"New"}]

テーブルの作成に使用する

for (var item in changeData){ 
        var tr=$('<tr onclick=\"ShowChange(' + no + ');\" class=\"childDiv\"></tr>');
        outward = changeData[item].RemoteRoute.Outward;
        code = changeData[item].RemoteRoute.Code;
        name = changeData[item].RemoteRoute.Name;
        change = changeData[item].Change; 

        $('<td>'+ code          +'</td>').appendTo(tr);
        $('<td>'+ name          +'</td>').appendTo(tr);
        $('<td>'+ change        +'</td>').appendTo(tr);
        tr.appendTo('.displaytable');  
    };

ajaxで検索ボックス（「名前」用）を作成しようとしています。しかし、上で述べたように、私はここから完全に無知です。

誰かが私が取るかもしれないいくつかのアプローチを提案してください。例は素晴らしいでしょう。本当にありがとう！

4

3 に答える 3

0

ID として名前を持つ td を持つように、コードを少し変更します。このようにして、jquery を追加して、その名前 ID を探して td コレクションを反復処理することができます。次に、目的の行を表示または非表示にする場合です。

for (var item in changeData){ 
    var tr=$('<tr onclick=\"ShowChange(' + no + ');\" class=\"childDiv\"></tr>');
    outward = changeData[item].RemoteRoute.Outward;
    code = changeData[item].RemoteRoute.Code;
    name = changeData[item].RemoteRoute.Name;
    change = changeData[item].Change; 

    $('<td>'+ code          +'</td>').appendTo(tr);
    $('<td id="' + name + '">'+ name          +'</td>').appendTo(tr);
    $('<td>'+ change        +'</td>').appendTo(tr);
    tr.appendTo('.displaytable');  
};

jQuery:

$('#txtBoxIDUsedToFilterByName').keyUp(function(){
    var searchTerm = $(this).val();
    $('.displaytable > tr > td').each(function(){
        if($(this).attr('id:contains("' + searchTerm + '")')
            $(this).closest('tr').show();
        else
            $(this).closest('tr').hide();
    });
});
于 2013-01-30T13:48:42.480 に答える
0

私は次のようなことをしたでしょう：

$(function(){

    $.each(changeData, function(k, v){

         var $tr = $('<tr>' +
                         '<td class="name">'+ v.RemoteRoute.Name+'</td>' + 
                         //add all the tds here
                     '</tr>')
                     .click(function(event){
                          //handle the <tr> click here
                     })
                     .hide() //hide the row
                     .attr({ 'class': 'childDiv' }); 
                     //addClass() is another options

    });

});

しかし、検索部分を詳しく説明していただけますか? すべての行を非表示にして、(テキスト ボックスと比較して) 数学名を持つ行のみを表示しますか? その場合：

$('input[type="text"]').keyup(function(){

    var searchText = $(this).val();

    $('table tr td.name').filter(function(){ 
        return $(this).text().indexOf(searchText) !== -1;
    })
    .closest('tr')
    .show();

    //show the closest tr if searchtext matches the name

});
于 2013-01-30T13:49:40.623 に答える
0

次の例に従います。

入力テキストとテーブルを作成しました

<input id="namefilter" type="text" />
<table id="mytable">
    <tr>
        <th>Code</th>
        <th>Name</th>
        <th>Change</th>
    </tr>
    <tr>
        <td>Code 1</td>
        <td>Dan Poter</td>
        <td>Change 1</td>
    </tr>
      <tr>
        <td>Code 1</td>
        <td>Name 1</td>
        <td>Change 1</td>
    </tr>
      <tr>
        <td>Code 1</td>
        <td>Bred Pit</td>
        <td>Change 1</td>
    </tr>
      <tr>
        <td>Code 1</td>
        <td>Don Joun</td>
        <td>Change 1</td>
    </tr>
      <tr>
        <td>Code 1</td>
        <td>Pitter</td>
        <td>Change 1</td>
    </tr>
</table>

次にjqueryコード

$("#namefilter").keyup(function(event) {
   var textToFilter = $(this).val();
    var table = $('#mytable');
                table.find('tr').each(function (index, row) {
                    var allCells = $(row).find('td:nth-child(2)');
                    if (allCells.length > 0) {
                        var found = false;
                        allCells.each(function (index, td) {
                            var regExp = new RegExp(textToFilter, 'i');
                            if (regExp.test($(td).text())) {
                                found = true;
                                return false;
                            }
                        });
                        if (found == true) {
                            $(row).show("fast");
                        } else {
                            $(row).hide("fast");
                        }
                    }
                });
});

次の行を変更することで、テーブル内のすべての列に基づいてフィルター処理するように簡単に設定できます。

var allCells = $(row).find('td:nth-child(2)');

に：

var allCells = $(row).find('td');

フィデルの例

于 2013-01-30T13:57:07.623 に答える