html复选框重叠,html – 单击复选框时,可扩展和可折叠功能正在运行

只是替换

$(document).ready(function () {

$('#example').DataTable({

"responsive": true,"dom": 't'

});

});

通过

$(document).ready(function () {

$('#example').DataTable({

"responsive": true,"dom": 't'

});

$('td').on('click mousedown mouseup',function(e) {

if (e.target.type === 'checkBox') {

e.stopPropagation();

}

});

});

如果单击复选框,此部分将停止点击传播

$('td').on('click mousedown mouseup',function(e) {

if (e.target.type === 'checkBox') {

e.stopPropagation();

}

});

编辑：

要删除单元格单击功能并将其仅添加到折叠/扩展按钮,我必须创建一个新的html元素并将其放在单元格中：’< div class =“clickBtn”> < / DIV>”

为什么？因为旧的按钮是一个之前的伪元素,所以它实际上并不在dom中.我需要dom中的一个元素,只允许在单击此特定元素时消耗/崩溃,而不是整个单元格.

然后我给这个按钮旧按钮的CSS

.clickBtn {

-webkit-touch-callout: none;

-webkit-user-select: none;

-khtml-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

cursor: pointer;

top: 9px;

left: 4px;

height: 14px;

width: 14px;

position: absolute;

color: white;

border: 2px solid white;

border-radius: 14px;

Box-shadow: 0 0 3px #444;

Box-sizing: content-Box;

text-align: center;

font-family: 'Courier New',Courier,monospace;

line-height: 14px;

background-color: #337ab7;

}

并删除旧的：

table.dataTable.dtr-inline.collapsed>tbody>tr>td:first-child:before,table.dataTable.dtr-inline.collapsed>tbody>tr>th:first-child:before {

display: none;

}

现在我需要更改单元格单击行为,只有在单击折叠/消耗按钮时才会发生.

$('td').on('click mousedown mouseup',function(e) {

if (e.target.className === 'clickBtn showBtn') {

if (e.target.innerText === '+') {

e.target.innerText = '-';

e.target.style.backgroundColor = 'red';

} else {

e.target.innerText = '+';

e.target.style.backgroundColor = '#337ab7';

}

} else {

e.stopPropagation();

}

});

单击单元格时,如果单击的目标不是具有“clickBtn”和“showBtn”类的元素,则会停止事件传播.这就是为什么现在只有clickBtn可以消耗/崩溃的原因.

这部分只是重新创建旧的按钮颜色和文本更改：

if (e.target.innerText === '+') {

e.target.innerText = '-';

e.target.style.backgroundColor = 'red';

} else {

e.target.innerText = '+';

e.target.style.backgroundColor = '#337ab7';

}

编辑2：

要删除蓝色部分,即文本选择,我必须将此css添加到按钮：

-webkit-touch-callout: none;

-webkit-user-select: none;

-khtml-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;