在拼接好table之后,调用bindTr()方法绑定点击事件
//tr绑定点击事件
function bindTr() {
//第一行为表头,所以不需要点击事件
$("#TableId>tr:not(:first)").bind('click', function () {
//获取第一列中的选择框,也可以使用"td:eq(0)"
//input[name='choiceUser']也可以将name改为其它的属性,比如id,type等
var thisObj = $(this).find("td:first-child>input[name='choiceUser']")
//如果当前选择框为checkbox并且是选中状态,则取消选中状态
if (thisObj.attr("type")=="checkbox" && thisObj.is(":checked")) {
$(thisObj).prop("checked", false)
}
//如果当前状态为未选中,则将状态变为选中
else {
$(thisObj).prop("checked", true)
}
CheckedChange(thisObj)
})
}
//單選框或者複選框改變時調用該方法,顯示選中數據
function CheckedChange(thisObj) {
//防止事件冒泡,一定不能忘记,否则点击选择框本身的时候会出现问题,这个方法可能在ie中不兼容,所以需要修改一下
//event.stopImmediatePropagation();
//改成调用这个方法
stopPropagation(event)
//选择框的类型checkbox或者radio
var type = $(thisObj).attr("type")
if (type == "radio") {
radioClick(thisObj)
}
else if (type == "checkbox") {
checkboxClick(thisObj)
}
}
//防止事件冒泡
function stopPropagation(e){
e=window.event||e;
if(document.all){ //只有ie识别
//cancelBubble 检测是否接受上层元素的事件的控制。
//true 不被上层元素的事件控制。
//false 允许被上层元素的事件控制。这是默认值。
e.cancelBubble=true;
}else{
e.stopImmediatePropagation();
}
}