如何改变表格中点击的样式
这个问题在这里已经有了答案:
这将一个添加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>
function makeMeBlue(element) {
element.style.color = 'blue';
}
<table id="table">
<thead>
<tr>
<th onclick="makeMeBlue(this)">Name</th>
<th onclick="makeMeBlue(this)">Times Placed</th>
<th onclick="makeMeBlue(this)">UMF (KB)</th>
<th onclick="makeMeBlue(this)">UAC</th>
<th onclick="makeMeBlue(this)">Texture Memory (MB)</th>
<th onclick="makeMeBlue(this)">Texture Count</th>
<th onclick="makeMeBlue(this)">Mesh Memory (KB)</th>
<th onclick="makeMeBlue(this)">Mesh Count</th>
<th onclick="makeMeBlue(this)">Path</th>
</tr>
</thead>
</table>
链接地址: http://www.djcxy.com/p/25223.html