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

按照这个例子：

我创建了一个输入文本和一个表格

<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 回答
0

稍微更改您的代码，以便您拥有一个名称为 id 的 td。这样，您就可以添加一些 jquery 来遍历 td 集合以查找该名称 id。然后是显示或隐藏所需行的情况。

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 回答