首頁猿問 js table的一點問題...

js table的一點問題也不知道該怎么起標題謝謝各位大佬了

JavaScript

寶慕林4294392 2019-04-18 19:15:36

$("tr").first().nextAll().click(function () {$("input[name='chkId']:checkbox").attr('checked',false); $("#chkAll").attr('checked',false); $(this).children().first().children().attr("checked", true);});單擊tr選中當前行的第一個td的事件，但是現(xiàn)在有個需求是一個點選對多條進行操作的功能就和這個沖突了只能全選，能不能把這個修改一下就是如果我點擊每一行第一個td 就是那個checkbox的時候，讓他不觸發(fā)這個事件或者修改一下這個方法，感謝各位大佬

查看完整描述

8 回答

慕桂英4014372

TA貢獻1871條經(jīng)驗獲得超13個贊

給ajax刷上去的tr加一個class 用于區(qū)分標題欄和數(shù)據(jù)
$(".trEmp td").nextAll().click(function () {

$("input[name='chkId']:checkbox").attr('checked',false);
$("#chkAll").attr('checked',false);
$(this).parent().children().first().children().attr("checked", true);

});

這樣就可以了研究了大半天終于可以了不知道有沒有人用的上我就放這邊了

反對回復 2019-05-13

慕田峪9158850

TA貢獻1794條經(jīng)驗獲得超8個贊

點選的時候，加上阻止冒泡就行了，這樣父元素就獲取不到點擊事件了

反對回復 2019-05-13

慕勒3428872

TA貢獻1848條經(jīng)驗獲得超6個贊

全選、反全選和單獨選中要分開寫

$(()=>{
    //單選判定是否全選按鈕是否要選中
    $("tbody").on("click","[type=checkbox]",()=>{   //給所有tbody下的checkbox 綁定單擊事件
        var $chbs=$("tbody").find("[type=checkbox]");
        var c=0;
        for(var i=0;i<$chbs.length;i++){
            if($($chbs[i]).prop("checked")==true){//每一次點擊都要判定是否所有的checkbox都被選中，統(tǒng)計選中的數(shù)量
                c++;
                if(c==$chbs.length){// 如果所有的checkbox都被選中，全選按鈕也被選中
                    $("#selAll").prop("checked",true);
                }
            }else{
                $("#selAll").prop("checked",false);// 一旦有一個沒被選中，全選按鈕設置未選中，退出循環(huán)
                break;
            }
        }
    })
});
//全選和反全選
$(()=>{
    $("tbody").on("change","#selAll",e=>{// 給全選按鈕單獨綁定事件
        var $chbs=$("tbody").find("[type=checkbox]"); // 找到所有的checkbox·
        if($(e.target).is(":checked")){ // 如果全選選中，所有的checkbox都被選中
            $chbs.each(function(){             
                $(this).prop("checked",true);
            });
        }else{
            $chbs.each(function(){// 否則，所有的checkbox都不能選中
                $(this).prop("checked",false);
            });     
        }
    });
});

反對回復 2019-05-13