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

概述我使用 jquery datatable创建了一个表.我还使用数据表的响应功能来使其响应.代码工作正常,但我面临的问题是表的第一列有一个复选框,当我们将表宽度调整为较小宽度时,可折叠选项将如下所示 现在,当我们单击复选框时,可折叠功能正在运行. 我的代码如下所示 Working Demo <table id="example" class="table table-striped table-ho 我使用 jquery datatable创建了一个表.我还使用数据表的响应功能来使其响应.代码工作正常,但我面临的问题是表的第一列有一个复选框,当我们将表宽度调整为较小宽度时,可折叠选项将如下所示

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

我的代码如下所示

Working Demo

<table ID="example"  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>0,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>0,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;

总结

以上是内存溢出为你收集整理的html – 单击复选框时,可扩展和可折叠功能正在运行全部内容，希望文章能够帮你解决html – 单击复选框时,可扩展和可折叠功能正在运行所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。