【发布时间】：2014-10-02 14:23:24
【问题描述】：
我正在创建一个 HTML 表格，该表格当前具有附加到列标题 TH 的单击事件以对表格进行排序。
我现在要做的是在单击“某处”时通过显示其他隐藏列来扩展列。
现在，我对这个“某处”的最初想法是在每个 TH 上创建一个 :pseudo 元素，该元素具有隐藏的列（它们都有一个特定的 css 类），并将 show 事件附加到这个 :pseudo 元素上，但是，当我这样做时，它会触发列排序。
我尝试将$('.xxp').on('click', function () { 更改为$('.xxp:before').on('click', function () {，但我因为TH 具有我需要的数据属性，当我使用$(this).parent('th') 时我无法获取数据，因此扩展不会触发.. .. 你能定位一个伪元素的父元素吗？
所以，看sn-p，我想点击绿色对表格进行排序，我想点击红色显示隐藏列但不同时触发排序（目前是)。
$(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"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c">1</td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td> 3</td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c">2</td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c">1</td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </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>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"> </td>
<td class="xx_0c">1</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>2</td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c">2</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>
</tbody>
</table>【问题讨论】：
-
您不能将侦听器附加到伪元素。他们被称为伪是有原因的……
-
是的@Bergi，我知道它们实际上并不存在于 DOM 中。我希望在
:before:hover上使用pointer-events的组合可能是一种选择，但我需要弄清楚这一点。 -
而是创建一个实际元素并将其附加到
<th>。我认为没有理由为此使用 CSS 伪元素。 -
啊，是的。谢谢@Bergi，我不敢相信我没有想到这一点。这是那些日子之一。
标签： javascript jquery html css pseudo-element