jquery - 在 html 表中标记 2 行

Question

假设我有一个使用敲除可观察数组与数据绑定的 HTML 表。

现在我希望用户能够选择最多 2 行。当他选择 2 行时，我将启用一个按钮。单击该按钮将从 2 行中选择值并传递给我的 WCF 服务。

我的意思是我正在尝试实现相同的功能，我们可以比较 2 个文件。例如在 TFS 中，当我们选择任何文件并查看文件历史记录时。然后我们可以在列表中选择 2 行并右键单击它并选择比较。

如果有的话，我只需要使用 jquery 的例子。

如果您需要更多说明，请告诉我。

Answer 1

maybe something like this:

$(function(){
    var count = 1;
    $("table").on("click", "tr", function(){
        var $this = $(this);
        if($this.hasClass("selected")){
            $this.removeClass("selected");
            count--;
        }else{
            if(count < 3){
                $this.addClass("selected");
                count++;
            }
        }
    });
});

Answer 2

这是一个淘汰赛解决方案。

视图很简单，两列。第一个用于复选框，第二个用于值。

<table>
    <tbody data-bind="foreach: items">
        <tr>
            <td>
                <input type="checkbox" data-bind="checked: selected, enable: $parent.selectionAllowed() || selected()" />
            </td>
            <td><span data-bind="text: value" />
            </td>
        </tr>
    </tbody>
</table>

这是视图模型：

var Item = function (parent, value) {
    var self = this;
    var parent = parent;
    self.value = value;

    self.selected = ko.computed({
        read: function () {
            return parent.selectedItems.indexOf(self) >= 0;
        },
        write: function (sel) {
            if (sel) {
                parent.selectedItems.push(self);
            } else {
                parent.selectedItems.remove(self);
            }
        }

    });
};

var VM = function () {
    var self = this;
    self.selectedItems = ko.observableArray();

    self.selectionAllowed = ko.computed(function () {
        return self.selectedItems().length < 2;
    });


    self.items = ko.utils.arrayMap(['a', 'b', 'c', 'd', 'e'], function (item) {
        return new Item(self, item);
    });


};
var vm = new VM();

ko.applyBindings(vm);

• 当一个项目被选中时，这个项目被推送到视图模型的 selectedItems 数组中。

• 当取消选择某个项目时，该项目将被删除。

见小提琴

我希望它有所帮助。