html - 表格行后的CSS三 Angular 形

Question

我想在 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;
}

Answer 1

“内容”必须解决您的问题；)

content: '';   

http://jsfiddle.net/j95f8met/3/