如何更改表中点击的样式

时间:2015-09-21 19:19:43

标签: javascript html css

我有一个javascript,它使HTML中的表可以排序。但是我想设置使用javascript单击的列的标题。

我怎样才能得到桌子的那个?我知道我需要更改标题的列。

以下是我的javascript现在返回给我的内容。

的javascript

console.log(table.tHead);

输出到控制台:

<thead>
        <tr>
            <th>Name</th>
            <th>Times Placed</th>
            <th>UMF (KB)</th>
            <th>UAC</th>
            <th>Texture Memory (MB)</th>
            <th>Texture Count</th>
            <th>Mesh Memory (KB)</th>
            <th>Mesh Count</th>
            <th>Path</th>
        </tr>
</thead>

2 个答案:

答案 0 :(得分:3)

这会为点击的selected元素添加th课程,它会从先前点击的selected中移除th课程:

document.querySelector('thead').addEventListener('click', function(e) {
  var current;
  if (e.target.tagName === 'TH') {
    current = document.querySelector('th.selected');
    if (current) {
      current.classList.remove('selected');
    }
    e.target.classList.add('selected');
  }
});
th {
  border: 1px solid #bbb;
  padding: 0.5em;
}
.selected {
  background: #def;
}
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Times Placed</th>
      <th>UMF (KB)</th>
      <th>UAC</th>
      <th>Texture Memory (MB)</th>
      <th>Texture Count</th>
      <th>Mesh Memory (KB)</th>
      <th>Mesh Count</th>
      <th>Path</th>
    </tr>
  </thead>
</table>

假设页面上只有一个表,它应该与您现有的代码一起使用。

答案 1 :(得分:0)

&#13;
&#13;
$(document).ready(function() {

var accordionInView = 0

$(".accordionWrapper").click(function(){

    if (accordionInView == 0) {

    accordionInView = 1;
    $(this).find(".accordionBtn").toggleClass("rotated");
    $(this).closest('.accordionParent').find(".accordionContent").css('opacity', 0).slideDown('slow').animate({ opacity: 1 },{ queue: false, duration: 'slow' });

    }

    else if (accordionInView == 1) {

    accordionInView = 0;
    $(this).find(".accordionBtn").toggleClass("rotated");
    $(this).closest('.accordionParent').find(".accordionContent").css('opacity', 1).slideUp('slow').animate({ opacity: 0 },{ queue: false, duration: 'slow' });
    }


});

});
&#13;
function makeMeBlue(element) {
  element.style.color = 'blue';
}
&#13;
&#13;
&#13;