排序html表根据列表的复选框在表列

Sort html table according to list of checkboxes in table column

本文关键字：复选框 html 排序列表更新时间：2023-09-26

在我的html表中有一列("IsReserved")是复选框列表，有些是选中的，有些不是。当用户单击IsReserved标头时，表将按它排序。意味着在第一次点击asc顺序和第二次点击desc顺序。我希望这个问题是通过使用javascript或jquery完成的，如果有其他的，那么请。

简而言之，我想根据"IsReserved"列中的复选框排序表谢谢。

function sortTable(f, n) {
        var rows = $('#tab tbody  tr').get();
        rows.sort(function (a, b) {
            var A = $(a).children('td').eq(n).text().toUpperCase();
            var B = $(b).children('td').eq(n).text().toUpperCase();
            $("input:checkbox").attr("id")
            parseInt($(a).data("sort"));
            if (A < B) {
                return -1 * f;
            }
            if (A > B) {
                return 1 * f;
            }
            return 0;
        });
        $.each(rows, function (index, row) {
            $('#tab').children('tbody').append(row);
        });
    }
    var f_sl = 1;
    var f_nm = 1;
    //sort table by name
    $("#name").click(function () {
        f_sl *= -1;
        var n = $(this).prevAll().length;
        sortTable(f_sl, n);
    });
    //sort table by code
    $("#code").click(function () {
        f_nm *= -1;
        var n = $(this).prevAll().length;
        sortTable(f_nm, n);
    });
    //sort table by category
    $("#category").click(function () {
        f_nm *= -1;
        var n = $(this).prevAll().length;
        sortTable(f_nm, n);
    });
    //sort table by saleprice
    $("#saleprice").click(function () {
        f_nm *= -1;
        var n = $(this).prevAll().length;
        sortTable(f_nm, n);
    });
    //sort table by lead time
    $("#leadtime").click(function () {
        f_nm *= -1;
        var n = $(this).prevAll().length;
        sortTable(f_nm, n);
    });
    //sort table by qty per unit
    $("#qtu").click(function () {
        f_nm *= -1;
        var n = $(this).prevAll().length;
        sortTable(f_nm, n);
    });
    //sort table by current stock
    $("#currentstock").click(function () {
        f_nm *= -1;
        var n = $(this).prevAll().length;
        sortTable(f_nm, n);
    });
    //sort table by record level
    $("#recordlevel").click(function () {
        f_nm *= -1;
        var n = $(this).prevAll().length;
        sortTable(f_nm, n);
    });
    //end of sort table

 <tbody data-bind="foreach: ProductViewList">
                            <tr>
                                <td class="calign leftbordernone" style="width:50px">
                                    <a data-bind="attr: { 'href': '@Url.Action("EditProduct", "Inventory")?id=' + Id}" title="Edit Product">
                                        <img src="~/Images/edit.png" height="15" width="15" alt="" />
                                    </a>
                                </td>
                                <td class="calign leftbordernone" style="width:50px">
                                    <a data-bind="click: function () { DeleteProduct(Id); }" href="" title="Delete Product">
                                        <img src="~/Images/delete.png" height="15" width="15" alt="" />
                                    </a>
                                </td>
                                <td class=" lalign leftbordernone" style="width:90px" data-bind="text: ProductCode"></td>
                                <td class=" lalign" data-bind="text: ProductName"></td>
                                <td class=" lalign" style="width:70px" data-bind="text: CategoryName"></td>
                                <td class=" lalign" style="text-align:center;width:40px">
                                    <input type="checkbox" disabled="disabled" class="chkbox" data-bind="checked:IsActive" />
                                </td>
                                <td class=" lalign" style="text-align:right" data-bind="text: formatPrice(SalesPrice)"></td>
                                <td class=" lalign" style="text-align:right" data-bind="text: QtyperUnit"></td>
                                <td class=" lalign" style="text-align:right" data-bind="text: LeadTime"></td>
                                <td class=" lalign" style="text-align:right" data-bind="text: CurrentStock"></td>
                                <td class=" lalign" style="text-align:right" data-bind="text: ReorderLevel"></td>
                                <td class=" lalign rightbordernone" style="text-align:center">
                                    <input type="checkbox" disabled="disabled" class="chkbox" data-bind="checked: Reserved" />
                                </td>
                            </tr>
                        </tbody>
                    </table>

我想根据复选框对表进行排序

为了做到这一点，您需要比较列内input的checked属性。

在你的rows.sort方法中，像这样使用比较器:

$rows.sort(function(a, b) {
    var value1= $(a).find('td').eq(idx).find("input")[0].checked,
        value2 = $(b).find('td').eq(idx).find("input")[0].checked;
    return (value1 > value2); 
}

其中idx为被点击的标题所在列的索引。

这是一个完整的工作演示，对多列进行排序(在代码注释中解释)…

:

var $buttons = $('.sort'), $tab = $("#tab");
$buttons.click(function(e) {
    var self = this,
    	$rows = $tab.find("tbody > tr"),
        idx = $buttons.index(this);       // index of the header which is clicked
  
    $rows.sort(function(a, b) {
        var $obj1 = $(a).find('td').eq(idx),  // which cell column based on index
            $obj2 = $(b).find('td').eq(idx),  
            value1, value2;
        
        if ($obj1.text().length > 0) {           // if the cell contains text
            value1 = $obj1.text().toUpperCase(); // use the text value
            value2 = $obj2.text().toUpperCase();
        } else {                                 // if the cell does not contain text
            value1 = $obj1.find("input")[0].checked; // use the checked property..
            value2 = $obj2.find("input")[0].checked  // .. of the input
        }
        // check if ascending or not
        if ($(self).hasClass('asc')) return (value1 > value2); 
        else return (value1 < value2); 
        
    });
    
    $(this).toggleClass('asc'); // toggle class for next ascending-descending sort
  
    // perform physical reordering
    $.each($rows, function(index, row){
        $tab.append(row);
    });
    
});

table, th, td { border: 1px solid #ddd; border-collapse: collapse; }
th, td { padding: 4px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tab">
    <thead>
        <tr>
            <th><a href="#" class="sort asc">IsReserved</a></th>
            <th><a href="#" class="sort asc">Caption</a></th>
            <th><a href="#" class="sort asc">Other</a></th>
        </tr>
    </thead>
        <tr><td><input type="checkbox" /></td><td>One</td><td>1</td></tr>
        <tr><td><input type="checkbox" checked /></td><td>Two</td><td>2</td></tr>
        <tr><td><input type="checkbox" /></td><td>Three</td><td>3</td></tr>
        <tr><td><input type="checkbox" checked /></td><td>Four</td><td>4</td></tr>
    <tbody>
    </tbody>
</table>

小提琴:http://jsfiddle.net/abhitalks/m6nn4ved/1/

您可以使用jquery表排序器。

$(document).ready(function() { 
   $("#tableid").tablesorter();    
});