Question

我想在html表格的当前选定行之后添加一个箭头（或＆＃34;三角形＆＃34;）（以突出显示所选内容，而不是使用背景颜色更改）。

三角形应该朝左，就像这样＆＃39;＆lt;＆＃39;

我已经设法将一个类添加到当前选定的行中，我认为其余的只能在css中完成，但我还没有能够做到。

以下是突出显示该行的脚本：

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

＆＃39;内容＆＃39;必须解决你的问题;）

content: '';

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

Answer 2

您需要在content伪元素上设置:after属性。

为什么需要这样做，您可以在下面阅读这个问题：Why do pseudo-elements require a content property?

因此，从技术上讲，您还可以添加content: "\003c";，然后您将获得该字符（小于）<。这可用于替换您设置的边框以创建三角形。

要设置<字符的样式，您可以使用font-family，color，font-size等。

要使<字符更合适，您可以使用CSS positioning。

希望这有帮助。

表行后的css三角形

2 个答案: