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

我使用 jquery datatable创建了一个表.我还使用数据表的响应功能来使其响应.代码工作正常,但我面临的问题是表的第一列有一个复选框,当我们将表宽度调整为较小宽度时,可折叠选项将如下所示

现在,当我们单击复选框时,可折叠功能正在运行.

我的代码如下所示

Working Demo

<table id="example" class="table table-striped table-hover dt-responsive display Nowrap" cellspacing="0"> 
        <thead>
            <tr>
                <th></th>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkBox"></td>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td><input type="checkBox"></td>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
            :
        </tbody>
   </table>

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" language="javascript" src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="//cdn.datatables.net/plug-ins/a5734b29083/integration/bootstrap/3/dataTables.bootstrap.js"></script>
<script src="dataTables.responsive.js" type="text/javascript"></script>
<script>
    $(document).ready(function () {
        $('#example')
                .DataTable({
                    "responsive": true,"dom": '<"top"lf>t<"bottom"pi><"clear">'
                });
    });
</script>

当我们点击复选框时,任何人都可以告诉我如何防止可折叠和可扩展

解决方法

只是替换

$(document).ready(function () {
    $('#example').DataTable({
       "responsive": true,"dom": '<"top"lf>t<"bottom"pi><"clear">'
    });
});

通过

$(document).ready(function () {
    $('#example').DataTable({
       "responsive": true,"dom": '<"top"lf>t<"bottom"pi><"clear">'
    });

    $('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();
    }
});

plunker：http://plnkr.co/edit/PCHdDM7UGD0BLXoDhhD6?p=preview

编辑：

要删除单元格单击功能并将其仅添加到折叠/扩展按钮,我必须创建一个新的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;