Question

我在asp.net中创建了一个带搜索框的简单json表。我从数据库获取数据我不知道我做错了什么，我的搜索框无效。请任何人查看我的搜索代码？

$(document).ready(function () {
    $('.update').hide();
    $('.addRole').click(function () {
        addRole()
    });

    empRoles()
    $(".paginate").paginga({
        item: "> tr",
        itemsPerPage: 5,
        maxPageNumbers: 2
    });
    $('#searchGo').click(function () {
        var searchVal = $('#searchroleName').val();
        if (searchVal == "") {
            $('#searchroleName').addClass("error");
            $('.requiredField').show();
        }
        else {
            $('#searchroleName').removeClass("error");
            $('.requiredField').hide();
        }
    });
    $(".searchClear").click(function () {
        $('#searchroleName').val("");
        $('#roleListTable tr').show();
        $('.requiredField').hide();
        $('#searchroleName').removeClass("error");
    });
         var $rows = $('#roleListTable tr');
         var val = $.trim($('#searchroleName').val()).replace(/ +/g, ' ').toLowerCase();
         $rows.show().filter(function () {
         var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
         return !~text.indexOf(val);
    }).hide();
});

https://jsfiddle.net/ojog9uq0/

Answer 1

您的代码运行正常。您只需将搜索代码放在搜索按钮点击代码的else部分内。

$('#searchGo').click(function () {

    var searchVal = $('#searchroleName').val();
    console.log('click ' + searchVal);
    if (searchVal == "") {
        $('#searchroleName').addClass("error");
        $('.requiredField').show();
    }
    else {
        $('#searchroleName').removeClass("error");
        $('.requiredField').hide();
        var $rows = $('#roleListTable tr');
        var val = $.trim($('#searchroleName').val()).replace(/ +/g, ' ').toLowerCase();
        console.log("trim "+val);
        $rows.show().filter(function () {
          var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
          console.log("show text "+text);
          return !~text.indexOf(val);
        }).hide();
      }
});

试一试。

Working fiddle link

Answer 2

在以下更改后，您的代码在jsfiddle中工作

删除});

上方的function empRoles() {

删除此代码，因为它没有对它的依赖，并返回js错误

$(".paginate").paginga({
        item: "> tr",
        itemsPerPage: 5,
        maxPageNumbers: 2
);

Answer 3

试试这个：

Working fiddle demo

 $("#searchroleName").on("keyup", function() {
var g = $(this).val().toLowerCase();
$(".searchclass").find('td').each(function() {
    var s = $(this).text().toLowerCase();
    $(this).closest('td')[ s.indexOf(g) !== -1 ? 'show' : 'hide' ]();
    });
});

Answer 4

您只需将代码移至/写入$('#searchGo').click事件

var $rows = $('#roleListTable tr');
     var val = $.trim($('#searchroleName').val()).replace(/ +/g, ' ').toLowerCase();
     $rows.show().filter(function () {
     var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
     return !~text.indexOf(val);
                 }).hide();

var roleList=[{
"sNo"     :"1",
"roleName":"Designer"
},
{
"sNo"     :"2",
"roleName":"Developer"
},
{
"sNo"     :"3",
"roleName":"HR Dept"
},
{
"sNo"     :"4",
"roleName":"Project Manager"
}
];

$(document).ready(function () {
    $('.update').hide();
    $('.addRole').click(function () {
        addRole()
    });
    
    empRoles()
   
    $('#searchGo').click(function () {
        var searchVal = $('#searchroleName').val();
        if (searchVal == "") {
            $('#searchroleName').addClass("error");
            $('.requiredField').show();
        }
        else {
            $('#searchroleName').removeClass("error");
            $('.requiredField').hide();
        }
        
        var $rows = $('#roleListTable tr');
         var val = $.trim($('#searchroleName').val()).replace(/ +/g, ' ').toLowerCase();
         $rows.show().filter(function () {
         var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
         return !~text.indexOf(val);
   					 }).hide();
    });
    $(".searchClear").click(function () {
        $('#searchroleName').val("");
        $('#roleListTable tr').show();
        $('.requiredField').hide();
        $('#searchroleName').removeClass("error");
    });
         
});

function empRoles(){
		for(var i=0;i<roleList.length;i++)
	    {
	    var table='<tr id="row'+i+'"><td>'+roleList[i].sNo+'</td><td class="roleName" id="name'+i+'">'+roleList[i].roleName+'</td><td><button class="btn edit btn-info" id="edit'+i+'"><i class="fa fa-pencil"></i>Edit</button><button class="btn update btn-success" id="update'+i+'"><i class="fa fa-floppy-o"></i>Update</button><button class="btn dlt btn-danger" data-toggle="modal" data-target="#confirm"><i class="fa fa-trash-o"></i>Delete</button></td><tr>';
	   	$('#roleListTable').append(table)
	    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="searchRole">
                <input class="col-lg-3 col-md-3 col-sm-3 col-xs-4" type="text" name="searchroleName" id="searchroleName">
                <button class="btn btn-primary searchGo" id="searchGo">Go</button>
                <button type="reset" class="btn btn-primary searchClear">Clear</button>
            </div>
            <div class="col-lg-12 col-md-12 col-xs-12 padding paginate table-responsive">
                <table class="table table-hover table-bordered">
                    <thead class="roleListTableHead">
                        <tr>
                            <td>S.NO</td>
                            <td>ROLE NAME</td>
                            <td>ACTION</td>
                        </tr>
                    </thead>
                    <tbody class="items" id="roleListTable"></tbody>
                </table>
                </div>

搜索框无法在表格中使用

4 个答案: