javascript - 为 TH 伪元素添加点击事件，从 TH 获取数据属性并防止 TH 事件在点击时触发

Question

我正在创建一个 HTML 表格，该表格当前有一个点击事件附加到列标题 TH 以对表格进行排序。

我现在要做的是在您单击“某处”时通过显示额外的隐藏列来扩展列。 现在，我对这个“某处”的最初想法是在每个具有隐藏列的 TH 上创建一个 :pseudo 元素(它们都有一个特定的 css 类)并附加此 :pseudo 元素上的显示事件，但是，当我执行此操作时，它会触发列排序。

我尝试将 $('.xxp').on('click', function () { 更改为 $('.xxp:before').on('click ', function () { 但是我因为 TH 有我需要的数据属性，当我使用 $(this).parent('th')我无法获取数据，因此扩展未触发....您可以定位伪元素的父元素吗？

因此，查看代码片段，我想单击绿色对表格进行排序，我想单击红色以显示隐藏的列但不会同时触发排序(目前是这样)。

$(document).ready(function () {
            var openData = null;
            $('.xxp').on('click', function () {
                var $this = $(this),
                    colData = $this.data('col'),
                    openItem = $('.xx_' + colData + 'c'),
                    xplodeCols = $("td[class^='xx_'], th[class^='xx_']"),
                    moreInfoCols = $('.xMI_');

                //reset the columns
                xplodeCols.hide();

                //check if we are closing the current col
                if (openData == colData) {
                    //do something??
                    openData = null
                    moreInfoCols.show();
                }
                else {
                    openData = colData;
                    moreInfoCols.hide();
                    openItem.show();
                }
            });
        });

  //this is a dummy function for testing - 
  //I want the above code to run, but not this.
$('.xxp').on('click', function () {
 //   alert('Ooops! I did not want this event to fire!');
});

table td, table th {border:1px solid #ccc; width:30px}   
td[class^='xx_'], th[class^='xx_'] {
        display: none;
    }
.xxp {background: #00ff00 !important;}
    th[class^='xx_'] {
        background: #ccc !important;
    }

    .xxp:before {
        display:inline-block;
        width:15px;
        height:15px;
        content:"";
        background-color:#ff0000;
        float:right;
        position:absolute;
        margin-top:-20px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<br />
<table class="rpt">
  <tbody>
    <tr>
      <th>No</th>
      <th title="G" class="xxp" data-col="0">G</th>
      <th title="G" class="xx_0c">.1</th>
      <th title="G" class="xx_0c">.2</th>
      <th title="G" class="xx_0c">.3</th>
      <th title="G" class="xx_0c">.4</th>
      <th title="G" class="xx_0c">.5</th>
      <th title="G" class="xx_0c">.6</th>
      <th title="G" class="xx_0c">.7</th>
      <th title="G" class="xx_0c">.8</th>
      <th title="G" class="xx_0c">.9</th>
      <th title="F" class="xxp" data-col="1">F</th>
      <th title="F" class="xx_1c">.1</th>
      <th title="F" class="xx_1c">.2</th>
      <th title="F" class="xx_1c">.3</th>
      <th title="F" class="xx_1c">.4</th>
      <th title="F" class="xx_1c">.5</th>
      <th title="F" class="xx_1c">.6</th>
      <th title="F" class="xx_1c">.7</th>
      <th title="F" class="xx_1c">.8</th>
      <th title="F" class="xx_1c">.9</th>
    </tr>
    <tr>
      <td>0</td>
      <td> 1</td>
      <td class="xx_0c">&nbsp;</td>
      <td class="xx_0c">&nbsp;</td>
      <td class="xx_0c">&nbsp;</td>
      <td class="xx_0c">&nbsp;</td>
      <td class="xx_0c">1</td>
      <td class="xx_0c">&nbsp;</td>
      <td class="xx_0c">&nbsp;</td>
      <td class="xx_0c">&nbsp;</td>
      <td class="xx_0c">&nbsp;</td>
      <td> 3</td>
      <td class="xx_1c">&nbsp;</td>
      <td class="xx_1c">&nbsp;</td>
      <td class="xx_1c">2</td>
      <td class="xx_1c">&nbsp;</td>
      <td class="xx_1c">&nbsp;</td>
      <td class="xx_1c">1</td>
      <td class="xx_1c">&nbsp;</td>
      <td class="xx_1c">&nbsp;</td>
      <td class="xx_1c">&nbsp;</td>
    </tr>
    <tr>
      <td>0</td>
      <td>0 </td>
      <td class="xx_0c">&nbsp;</td>
      <td class="xx_0c">&nbsp;</td>
      <td class="xx_0c">&nbsp;</td>
      <td class="xx_0c">&nbsp;</td>
      <td class="xx_0c">&nbsp;</td>
      <td class="xx_0c">&nbsp;</td>
      <td class="xx_0c">&nbsp;</td>
      <td class="xx_0c">&nbsp;</td>
      <td class="xx_0c">&nbsp;</td>
      <td>0 </td>
      <td class="xx_1c">&nbsp;</td>
      <td class="xx_1c">&nbsp;</td>
      <td class="xx_1c">&nbsp;</td>
      <td class="xx_1c">&nbsp;</td>
      <td class="xx_1c">&nbsp;</td>
      <td class="xx_1c">&nbsp;</td>
      <td class="xx_1c">&nbsp;</td>
      <td class="xx_1c">&nbsp;</td>
      <td class="xx_1c">&nbsp;</td>
    </tr>
    <tr>
      <td>0</td>
      <td>0 </td>
      <td class="xx_0c"></td>
      <td class="xx_0c"></td>
      <td class="xx_0c"></td>
      <td class="xx_0c"></td>
      <td class="xx_0c"></td>
      <td class="xx_0c"></td>
      <td class="xx_0c"></td>
      <td class="xx_0c"></td>
      <td class="xx_0c"></td>
      <td>0 </td>
      <td class="xx_1c"></td>
      <td class="xx_1c"></td>
      <td class="xx_1c"></td>
      <td class="xx_1c"></td>
      <td class="xx_1c"></td>
      <td class="xx_1c"></td>
      <td class="xx_1c"></td>
      <td class="xx_1c"></td>
      <td class="xx_1c"></td>
    </tr>
    <tr>
      <td>0</td>
      <td> 1</td>
      <td class="xx_0c">&nbsp;</td>
      <td class="xx_0c">1</td>
      <td class="xx_0c">&nbsp;</td>
      <td class="xx_0c">&nbsp;</td>
      <td class="xx_0c">&nbsp;</td>
      <td class="xx_0c">&nbsp;</td>
      <td class="xx_0c">&nbsp;</td>
      <td class="xx_0c">&nbsp;</td>
      <td class="xx_0c">&nbsp;</td>
      <td>2</td>
      <td class="xx_1c">&nbsp;</td>
      <td class="xx_1c">&nbsp;</td>
      <td class="xx_1c">&nbsp;</td>
      <td class="xx_1c">2</td>
      <td class="xx_1c">&nbsp;</td>
      <td class="xx_1c">&nbsp;</td>
      <td class="xx_1c">&nbsp;</td>
      <td class="xx_1c">&nbsp;</td>
      <td class="xx_1c">&nbsp;</td>
    </tr>
  </tbody>
</table>

这是一个 fiddle :http://jsfiddle.net/wf_4/qkv510ot/

Answer 1

好的，感谢@bergi 的建议，我就是这样做的。

$(document).ready(function () {

             var pseudoBtn = $('<span />').attr({ 'class': 'pseudoBtn' });
             $('.xxp').prepend(pseudoBtn);

            var openData = null;
            $('.xxp span.pseudoBtn').on('click', function (e) {

                e.stopPropagation();
                var $this = $(this).parent('th'),
                    colData = $this.data('col'),
                    openItem = $('.xx_' + colData + 'c'),
                    xplodeCols = $("td[class^='xx_'], th[class^='xx_']"),
                    moreInfoCols = $('.xMI_');

                //reset the columns
                xplodeCols.hide();

                //check if we are closing the current col
                if (openData == colData) {
                    //do something??
                    openData = null
                    moreInfoCols.show();
                }
                else {
                    openData = colData;
                    moreInfoCols.hide();
                    openItem.show();
                }
            });
        });

  //this is a dummy function for testing - 
  //I want the above code to run, but not this.
$('.xxp').on('click', function () {
 //   alert('Ooops! I did not want this event to fire!');
});

table td, table th {border:1px solid #ccc; width:30px}   
td[class^='xx_'], th[class^='xx_'] {
        display: none;
    }
.xxp {background: #00ff00 !important;}
    th[class^='xx_'] {
        background: #ccc !important;
    }

    .xxp > span.pseudoBtn {
        display:inline-block;
        width:15px;
        height:15px;
        background-color:#ff0000;
        position:absolute;
        margin-top:-20px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<br />
<table class="rpt">
  <tbody>
    <tr>
      <th>No</th>
      <th title="G" class="xxp" data-col="0">G</th>
      <th title="G" class="xx_0c">.1</th>
      <th title="G" class="xx_0c">.2</th>
      <th title="G" class="xx_0c">.3</th>
      <th title="G" class="xx_0c">.4</th>
      <th title="G" class="xx_0c">.5</th>
      <th title="G" class="xx_0c">.6</th>
      <th title="G" class="xx_0c">.7</th>
      <th title="G" class="xx_0c">.8</th>
      <th title="G" class="xx_0c">.9</th>
      <th title="F" class="xxp" data-col="1">F</th>
      <th title="F" class="xx_1c">.1</th>
      <th title="F" class="xx_1c">.2</th>
      <th title="F" class="xx_1c">.3</th>
      <th title="F" class="xx_1c">.4</th>
      <th title="F" class="xx_1c">.5</th>
      <th title="F" class="xx_1c">.6</th>
      <th title="F" class="xx_1c">.7</th>
      <th title="F" class="xx_1c">.8</th>
      <th title="F" class="xx_1c">.9</th>
    </tr>
    <tr>
      <td>0</td>
      <td> 1</td>
      <td class="xx_0c">&nbsp;</td>
      <td class="xx_0c">&nbsp;</td>
      <td class="xx_0c">&nbsp;</td>
      <td class="xx_0c">&nbsp;</td>
      <td class="xx_0c">1</td>
      <td class="xx_0c">&nbsp;</td>
      <td class="xx_0c">&nbsp;</td>
      <td class="xx_0c">&nbsp;</td>
      <td class="xx_0c">&nbsp;</td>
      <td> 3</td>
      <td class="xx_1c">&nbsp;</td>
      <td class="xx_1c">&nbsp;</td>
      <td class="xx_1c">2</td>
      <td class="xx_1c">&nbsp;</td>
      <td class="xx_1c">&nbsp;</td>
      <td class="xx_1c">1</td>
      <td class="xx_1c">&nbsp;</td>
      <td class="xx_1c">&nbsp;</td>
      <td class="xx_1c">&nbsp;</td>
    </tr>
    <tr>
      <td>0</td>
      <td>0 </td>
      <td class="xx_0c">&nbsp;</td>
      <td class="xx_0c">&nbsp;</td>
      <td class="xx_0c">&nbsp;</td>
      <td class="xx_0c">&nbsp;</td>
      <td class="xx_0c">&nbsp;</td>
      <td class="xx_0c">&nbsp;</td>
      <td class="xx_0c">&nbsp;</td>
      <td class="xx_0c">&nbsp;</td>
      <td class="xx_0c">&nbsp;</td>
      <td>0 </td>
      <td class="xx_1c">&nbsp;</td>
      <td class="xx_1c">&nbsp;</td>
      <td class="xx_1c">&nbsp;</td>
      <td class="xx_1c">&nbsp;</td>
      <td class="xx_1c">&nbsp;</td>
      <td class="xx_1c">&nbsp;</td>
      <td class="xx_1c">&nbsp;</td>
      <td class="xx_1c">&nbsp;</td>
      <td class="xx_1c">&nbsp;</td>
    </tr>
    <tr>
      <td>0</td>
      <td>0 </td>
      <td class="xx_0c"></td>
      <td class="xx_0c"></td>
      <td class="xx_0c"></td>
      <td class="xx_0c"></td>
      <td class="xx_0c"></td>
      <td class="xx_0c"></td>
      <td class="xx_0c"></td>
      <td class="xx_0c"></td>
      <td class="xx_0c"></td>
      <td>0 </td>
      <td class="xx_1c"></td>
      <td class="xx_1c"></td>
      <td class="xx_1c"></td>
      <td class="xx_1c"></td>
      <td class="xx_1c"></td>
      <td class="xx_1c"></td>
      <td class="xx_1c"></td>
      <td class="xx_1c"></td>
      <td class="xx_1c"></td>
    </tr>
    <tr>
      <td>0</td>
      <td> 1</td>
      <td class="xx_0c">&nbsp;</td>
      <td class="xx_0c">1</td>
      <td class="xx_0c">&nbsp;</td>
      <td class="xx_0c">&nbsp;</td>
      <td class="xx_0c">&nbsp;</td>
      <td class="xx_0c">&nbsp;</td>
      <td class="xx_0c">&nbsp;</td>
      <td class="xx_0c">&nbsp;</td>
      <td class="xx_0c">&nbsp;</td>
      <td>2</td>
      <td class="xx_1c">&nbsp;</td>
      <td class="xx_1c">&nbsp;</td>
      <td class="xx_1c">&nbsp;</td>
      <td class="xx_1c">2</td>
      <td class="xx_1c">&nbsp;</td>
      <td class="xx_1c">&nbsp;</td>
      <td class="xx_1c">&nbsp;</td>
      <td class="xx_1c">&nbsp;</td>
      <td class="xx_1c">&nbsp;</td>
    </tr>
  </tbody>
</table>