根据表格列中的复选框列表对html表格进行排序

Question

在我的 html 表中，有一列（“IsReserved”）是复选框列表，有些已选中，有些未选中。 当用户单击 IsReserved 标头时，表格将按其排序。 表示按升序顺序单击第一次，然后按降序顺序单击第二次。 我希望这个问题是通过使用 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>

Answer 1

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

为此，您需要比较列内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 是被点击的标题列的索引。

这是一个完整的工作演示，对多列进行排序（代码 cmets 中的解释）...

片段：

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/

Answer 2

您可以为此使用jquery table sorter。

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