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

时间：2014-10-02 14:23:25

标签： javascript jquery html css pseudo-element

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

我现在要做的是在点击＆＃34;某处＆＃34;时通过显示其他隐藏列来扩展列。 现在，我最初想到这个＆＃34;某个地方＆＃34;是在每个:pseudo上创建一个TH元素，它有隐藏的列（它们都有一个特定的css类）并将show事件附加到此:pseudo元素上，但是，当我这样做会触发列排序。

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

所以，看一下片段，我想点击绿色来对表格进行排序，我想点击红色来显示隐藏的列，但不能同时触发排序（它当前是这样）。

＆＃13;
＆＃13; 
$(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!');
});
＆＃13; 
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;
    }
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

这是一个小提琴：http://jsfiddle.net/wf_4/qkv510ot/

1 个答案:

答案 0 :(得分：0)

好的，多亏了@bergi的建议，我就是这样做的。

＆＃13;
＆＃13; 
$(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!');
});
＆＃13; 
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;
    }
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题