Select 多行 Jquery

Question

我正尝试在 table 中 select 多行（有限）。我现在可以 select 并从那个 selection 接收数据，但我想限制我的 selection。我想创建一个 table 用户只能 select 6（有限）行。 selected 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 !");
}

编辑：我也想添加这个功能。

如果用户 selects 6 行并且 s/he 继续 select 更多，则第一个 selection 将更改为第 7 个 selection 等等上。

Answer 1

您需要检查用户是否在点击功能中选择了超过 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 !");
        }
    });

Answer 2

尝试函数内的条件：

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 !");
    }
  }
});

Select 多行 Jquery

Select Multiple Rows Jquery

javascript

jquery

rows

click

selection