Question

我需要在输入中使用搜索按钮。但是，我在输入处添加了按钮，但表中没有返回搜索中的数据，有人可以帮我吗？我有些不对劲，我看不到。 = /

以下是2 jsFiddle示例：

第一个没问题 - 成功过滤

jsfiddle.net/xk4mx58j

$('table#tabLeBank').each(function(){
    var table = $(this)
    var headers = table.find('th').length
    var filterrow = $('<tr>').insertAfter($(this).find('th:last()').parent())
    for (var i = 0; i < headers-1; i++){
        filterrow.append($('<th>').append($('<input style="width:100%" class="form-control text-uppercase">').attr('type','text').keyup(function(){
            table.find('tr').show()
            filterrow.find('input[type=text]').each(function(){
                var index = $(this).parent().index() + 1
                var filter = $(this).val() != ''
                $(this).toggleClass('filtered', filter)
                if (filter){
                    var el = 'td:nth-child('+index+')'
                    var criteria = ":contains('"+$(this).val()+"')"
                    table.find(el+':not('+criteria+')').parent().hide()
                }
            })
        })))
    }
    filterrow.append($('<th>').append($('<input style="width:100%" class="btn btn-link">').attr('type','button').val('Clear Filter').click(function(){
        $(this).parent().parent().find('input[type=text]').val('').toggleClass('filtered', false)
        table.find('tr').show()
    })))
})

第二个是问题（未成功过滤）

jsfiddle.net/xuo7kgL7/3/

$('table#tabLeBank').each(function(){
    var table = $(this)
    var headers = table.find('th').length
    var filterrow = $('<tr>').insertAfter($(this).find('th:last()').parent())
    for (var i = 0; i < headers-1; i++){
        filterrow.append($('<th id="th'+i+'">').append($('<div class="input-group"><input class="form-control text-uppercase" id="iconified_tab'+i+'" placeholder="search"><span class="input-group-btn"><button class="btn btn-default" type="button">Go!</button></span></div>')))
          }
    // only id1
    $('#th1 #iconified_tab1').attr('type','text').keyup(function(){
            table.find('tr').show()
            filterrow.find('input[type=text]').each(function(){
                var index = $(this).parent().index() + 1
                var filter = $(this).val() != ''
                $(this).toggleClass('filtered', filter)
                if (filter){
                    var el = 'td:nth-child('+index+')'
                    var criteria = ":contains('"+$(this).val()+"')"
                    table.find(el+':not('+criteria+')').parent().hide()                 
                }
                    alert($(this).val());
            })
        })
    filterrow.append($('<th>').append($('<input style="width:100%" class="btn btn-link">').attr('type','button').val('Clear Filter').click(function(){
        $(this).parent().parent().find('input[type=text]').val('').toggleClass('filtered', false)
        table.find('tr').show()
    }))) })

jQuery表排序（不在字段搜索中使用按钮过滤）

0 个答案: