我想在 html 表格的当前选定行之后添加一个箭头(或“三 Angular 形”)(以突出显示选定的内容,而不是使用背景颜色更改)。
三 Angular 形应该朝左,就像这个'<'。
我已经设法将一个类添加到当前选定的行,我认为其余的只能在 css 中完成,但我没能做到。
fiddle :http://jsfiddle.net/j95f8met/
这是高亮该行的脚本:
document.querySelector('table').onclick = highlight;
function highlight(e) {
e = e || event;
var from = findrow(e.target || e.srcElement),
highlighted = /highlighted/i.test((from || {}).className);
if (from) {
var rows = from.parentNode.querySelectorAll('tr');
for (var i = 0; i < rows.length; i += 1) {
rows[i].className = '';
}
from.className = !highlighted ? 'highlighted' : '';
}
}
function findrow(el) {
if (/tr/i.test(el.tagName)) return el;
var elx;
while (elx = el.parentNode) {
if (/tr/i.test(elx.tagName)) {
return elx;
}
}
return null;
}
这是我的 CSS:
tr.highlighted td {
background: red;
}
tr.highlighted:after {
border-bottom: 60px solid transparent;
border-left: 60px solid green;
border-top: 60px solid transparent;
height: 0;
width: 0;
float:right;
}
最佳答案
关于html - 表格行后的CSS三 Angular 形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25970925/