Question

我刚刚开始使用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创建一个搜索框（用于'name'）。然而，正如我上面所说，我从这里完全无能为力。

有人可以建议我采取一些方法。一个例子就是很棒。非常感谢！

Answer 1

稍微更改您的代码，以便您拥有名称为id的td。这样，您就可以通过td集合添加一些jquery来查找该名称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();
    });
});

Answer 2

我会做这样的事情：

$(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

});

Answer 3

请遵循以下示例：

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

<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');

Fiddel example

需要使用Ajax创建JSON表的搜索文本框的解决方案

3 个答案: