如何对带有复选框的html表排序

How to sort a html table with a checkbox

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

如何将复选框与表连接起来?假设我的表有两行，第一行是男性，第二行是女性，我的复选框是男性，下一个是女性。所以我想要的是，当我勾选女性复选框时，女性行将移动到表中的第一行，而男性将移动到表中的第二行。我在notepad++中使用html

尝试使用淘汰赛

我使用了knockout:

    <
  • 检查绑定/gh><
  • Foreach绑定/gh><
  • 文本绑定/gh><
  • Observabe数组/gh>
  • 订阅

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());

是 演示

相关文章：