Question

当我搜索某些内容时，我再次遇到问题，它返回第一个行表，当我键入随机字母和数字时它排序，它只显示表的第一行。这个似乎有什么不对，我在标题上添加了一个排序。我怎么能纠正这个？

HTML

     <table id="mytable">
           <thead>
             <tr>
             <th id="date_distribution">Date of Distribution</th>
             <th id="semi_total" class = 'text-center'>Semi Total</th>
             <th>Action</th>
            </tr>
                </thead>
            <tr>
            <th>November 30 2017</th>
            <th>₱20,175.10</th>
            </tr>
             <tr>
            <th>December 15 2017</th>
            <th>₱19,838.20</th>
            </tr>
    </table>
        <br />
        <input type="text" id="search" placeholder="  live search"></input>

这是排序和搜索的代码

function sortTable(f,n){
    var rows = $('#mytable tbody  tr').get();

    rows.sort(function(a, b) {

        var A = getVal(a);
        var B = getVal(b);

        if(A < B) {
            return -1*f;
        }
        if(A > B) {
            return 1*f;
        }
        return 0;
    });

    function getVal(elm){
        var v = $(elm).children('td').eq(n).text().toUpperCase();
        if($.isNumeric(v)){
            v = parseInt(v,10);
        }
        return v;
    }

    $.each(rows, function(index, row) {
        $('#mytable').children('tbody').append(row);
    });
}
var f_date_distribution = 1;
var f_semi_total = 1;
$("#date_distribution").click(function(){
    f_date_distribution *= -1;
    var n = $(this).prevAll().length;
    sortTable(f_date_distribution,n);
});
$("#semi_total").click(function(){
    f_semi_total *= -1;
    var n = $(this).prevAll().length;
    sortTable(f_semi_total,n);
});

$("#search").on("keyup", function() {
    var value = $(this).val();

    $('#mytable tbody  tr').each(function(index) {
        if (index !== 0) {

            $row = $(this);

            var id = $row.find("td:first").text();
            var id2 = $row.find("td:nth-child(2)").text();

            if (id.indexOf(value) !== 0 && id2.indexOf(value) !== 0) {
                $row.hide();
            }
            else {
                $row.show();
            }
        }
    });
});

Answer 1

您的HTML中没有tbody和td。此外，循环遍历#mytable tr而不是#mytable tbody tr。请检查下面的更新代码。

function sortTable(f,n){
    var rows = $('#mytable tbody  tr').get();

    rows.sort(function(a, b) {

        var A = getVal(a);
        var B = getVal(b);

        if(A < B) {
            return -1*f;
        }
        if(A > B) {
            return 1*f;
        }
        return 0;
    });

    function getVal(elm){
        var v = $(elm).children('td').eq(n).text().toUpperCase();
        if($.isNumeric(v)){
            v = parseInt(v,10);
        }
        return v;
    }

    $.each(rows, function(index, row) {
        $('#mytable').children('tbody').append(row);
    });
}
var f_date_distribution = 1;
var f_semi_total = 1;
$("#date_distribution").click(function(){
    f_date_distribution *= -1;
    var n = $(this).prevAll().length;
    sortTable(f_date_distribution,n);
});
$("#semi_total").click(function(){
    f_semi_total *= -1;
    var n = $(this).prevAll().length;
    sortTable(f_semi_total,n);
});

$("#search").on("keyup", function() {
    var value = $(this).val();

    $('#mytable tr').each(function(index) {
        if (index !== 0) {

            $row = $(this);

            var id = $row.find("td:first").text();
            var id2 = $row.find("td:nth-child(2)").text();

            if (id.indexOf(value) !== 0 && id2.indexOf(value) !== 0) {
                $row.hide();
            }
            else {
                $row.show();
            }
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mytable">
           <thead>
             <tr>
             <th id="date_distribution">Date of Distribution</th>
             <th id="semi_total" class = 'text-center'>Semi Total</th>
             <th>Action</th>
            </tr>
                </thead>
                <tbody>
            <tr>
            <td>November 30 2017</td>
            <td>₱20,175.10</td>
            </tr>
             <tr>
            <td>December 15 2017</td>
            <td>₱19,838.20</td>
            </tr>
            </tbody>
    </table>
        <br />
        <input type="text" id="search" placeholder="  live search"></input>

Answer 2

由于不期望输入（意味着您可能输入大写字母），您应该使用toUpperCase()和toLowerCase()

来检查字母。

$("#search").on("keyup", function(e) {
    var value = $(this).val();
    
    $('#mytable tbody  tr').each(function(index) {
		$row = $(this);
		
		var id = $row.find("th:first-child").text();
		var id2 = $row.find("th:last-child").text();
		if(id.toUpperCase().indexOf(value.toUpperCase()) > -1 || id.toLowerCase().indexOf(value.toLowerCase()) > -1 || 
		    id2.indexOf(value) > -1){
		    $row.show();	
		}
		else {
			$row.hide();
			return;
		}
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mytable">
       <thead>
         <tr>
         <th id="date_distribution">Date of Distribution</th>
         <th id="semi_total" class = 'text-center'>Semi Total</th>
         <th>Action</th>
        </tr>
            </thead>
    <tbody>
      <tr>
        <th>November 30 2017</th>
        <th>₱20,175.10</th>
      </tr>
       <tr>
        <th>December 15 2017</th>
        <th>₱19,838.20</th>
      </tr>
    </tbody>
</table>
<br />
<input type="text" id="search" placeholder="  live search"></input>

搜索字符串和整数表javascript

2 个答案: