选择多行Jquery答案

【问题标题】：Select Multiple Rows Jquery选择多行Jquery
【发布时间】：2018-08-04 20:34:32
【问题描述】：

我正在尝试在表格中选择多行（有限）。我现在可以从该选择中选择和接收数据，但我想限制我的选择。我想创建一个用户只能选择 6（有限）行的表。选择 6 行后，我想停止点击事件。

我试过这样但它不起作用，因为事件无法停止。

var selectedRows = 0;

if(selectedRows < 6) {
    $("#table1 tr").click( function(){
        if($(this).hasClass("selected")) console.log("already chosen");
        else {
            $(this).addClass("selected");
            var id = $("th",this).html();
            selectedRows++;
            console.log(selectedRows, teamNo);
        }
    });
} else {
    console.log("you've chosen 6 rows !");
}

编辑：我也想添加此功能。

如果用户选择了 6 行并且她/他继续选择更多，则第一个选择会随着第 7 个选择而变化，依此类推。

【问题讨论】：

标签： javascript jquery click selection rows

【解决方案1】：

试试函数内部的条件：

var selectedRows = 0;

$("#table1 tr").click( function(event){
  if($(this).hasClass("selected")) console.log("already chosen");
  else {
    if(selectedRows <= 6) {
      $(this).addClass("selected");
      var id = $("th",this).html();
      selectedRows++;
      console.log(selectedRows, teamNo);
    }
    else {
      console.log("you've chosen 6 rows !");
    }
  }
});

【讨论】：

谢谢你说得对，那行得通。我不知道我怎么没注意到这一点:) 我试图在点击事件之前写，它与问题中的版本完全相同。
鉴于此，您可以创建一个类似“selectOption(elem)”的方法，这样您就不会混淆点击事件内部发生的事情和外部发生的事情。

【解决方案2】：

您需要检查用户是否在 click 函数中选择了超过 6 个，然后如果用户没有选择 6 个则触发操作。您只需将其翻转即可。

    $("#table1 tr").click( function(){
        if(selectedRows <= 6) {
            if($(this).hasClass("selected")) console.log("already chosen");
            else {
                $(this).addClass("selected");
                var id = $("th",this).html();
                selectedRows++;
                console.log(selectedRows, teamNo);
            }
        } else {
            console.log("you've chosen 6 rows !");
        }
    });

【讨论】：