如何使用复选框对html表进行排序

Question

如何将我的复选框与表格连接起来。假设我的表有2行，第一行是男性，第二行是女性，我的复选框是男性，下一个是女性。所以我想要的是当我检查我的女性复选框时，女性行将移动到表格的第一行，男性将移动到表格中的第二行。我在带有html

的记事本++中这样做

Answer 1

尝试使用 Knockout

我使用了淘汰赛：

• Checked Binding
• Foreach Binding
• Text Binding
• Observabe Array
• Subscribe

HTML

<div> 
    <input type="checkbox" name="name" value="Male" data-bind="checked: maleChecked" />Male
    <input type="checkbox" name="name" value="Female" data-bind="checked: femaleChecked" />Female
</div>
<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Gender</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: users">
        <tr>
            <td data-bind="text: name"></td>
            <td data-bind="text: age"></td>
            <td data-bind="text: gender"></td>
        </tr>
    </tbody>
</table>

的JavaScript

var users = [
        { "name": "AAA", "age": 22, "gender": "Male" },
        { "name": "BBB", "age": 21, "gender": "Female" },
        { "name": "CCC", "age": 26, "gender": "Female" },
        { "name": "DDD", "age": 24, "gender": "Male" }];

var vm = function () {
    var self = this;
    self.users = ko.observableArray(users);
    self.maleChecked = ko.observable(false);
    self.femaleChecked = ko.observable(false);

    self.maleChecked.subscribe(function (value) {
        if (value) {
            self.femaleChecked(false);
            self.users.sort(sortByMale);
        }
    });

    self.femaleChecked.subscribe(function (value) {
        if (value) {
            self.maleChecked(false);
            self.users.sort(sortByFemale);
        }
    });   
}

var sortByMale = function (a, b) {
    return a.gender > b.gender ? -1 : 1;
};

var sortByFemale = function (a, b) {
    return a.gender < b.gender ? -1 : 1;
};

ko.applyBindings(new vm());

以下是 Demo