jquery爲table添加行點擊事件,並防止事件冒泡

廢話不多說,直接上代碼

$(document).ready(function () {
            //第一行是表頭,不需要點擊事件
            //如果頁面中只有一個table的話,可以直接用$("table")這種方式,不過還是建議加上id
            //關於'>',如果頁面生成的table中包含tbody時,請將'>'替換爲空格,或者改爲'table>tbody>tr'格式
            $("[id$='tableId']>tr:not(:first)").bind('click', function () {
                //找到點擊行的checkbox,我這裏是放在第一列
                //如果不是第一列的話,可以使用td:nth-child()(從前往後)或者td:nth-last-child()(從後往前),下標都是從1開始
                var thisObj = $(this).find("td:first-child>input[type='checkbox']");
                if (thisObj.is(":checked")) {
                    $(thisObj).prop("checked", false);
                }
                else {
                    $(thisObj).prop("checked", true);
                }
            })

            //阻止checkbox的冒泡事件,radio同理
            $("input[type='checkbox']").click(function () {
                stopPropagation(event)
            })
        })

        //防止事件冒泡
        function stopPropagation(e) {
            e = window.event || e;
            if (document.all) {
                //只有ie識別
                //cancelBubble 檢測是否接受上層元素的事件的控制。
                //true 不被上層元素的事件控制。 
                //false 允許被上層元素的事件控制。這是默認值。
                e.cancelBubble = true;
            }
            else {
                e.stopImmediatePropagation();
            }
        }
}

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章