javascript - 根据值更改边框左侧的颜色

我有一张表格，我希望每行的左边框根据优先级而有所不同。

我的HTML：

<tr id= "rows">
      <td data-title="Link"><img src="form_blank.png" title="Agreement" width="40"/> <a href="${gr1.u_url.getDisplayValue()}" target = "_blank">${gr1.short_description.getDisplayValue()}</a></td>
      <td data-title="State"> ${gr1.state.getDisplayValue()} </td>
      <td data-title="Due" input="date" data-date-format="MM/DD/YYYY">${gr1.due_date.getDisplayValue().substring(0,10)} </td>
</tr>

我的Javascript：

<script>
function bordercolor() {
    var leftborder = document.getElementById("rows");
    if (${gr1.priority.getDisplayValue()} = 1){
        leftborder.style.borderLeft = "solid 10px #b30000";}
    else if (${gr1.priority.getDisplayValue()} = 2){
        leftborder.style.borderLeft = "solid 10px #ffa500";}
    else if (${gr1.priority.getDisplayValue()} = 3){
        leftborder.style.borderLeft = "solid 10px #ffff00";}
    else if (${gr1.priority.getDisplayValue()} = 4){
        leftborder.style.borderLeft = "solid 10px #7fbf7f";}
    else {leftborder.style.borderLeft = "solid 10px #006600";}
}

</script>

关于我在做什么错的任何建议吗？

最佳答案

我不确定${...}在您的代码中的含义，希望我没有遗漏明显的内容，但我认为这没什么用。闻到一些预处理替换逻辑，但是很难确定。

乍一看，还有其他错误是，您在=语句上使用了赋值运算符（if）而不是等号运算符（==）

另一个问题是tr不能带边框。在下面，您将找到我将如何实现这一点。注意使用css类，而不是直接操作元素边框。我还将一个ID分配给表，并使用此控件应用样式而不是行

的HTML

<table id="table">
  <tr>
      <td data-title="Link"><img src="form_blank.png" title="Agreement" width="40"/> <a href="${gr1.u_url.getDisplayValue()}" target = "_blank">${gr1.short_description.getDisplayValue()}</a></td>
      <td data-title="State"> ${gr1.state.getDisplayValue()} </td>
      <td data-title="Due" input="date" data-date-format="MM/DD/YYYY">${gr1.due_date.getDisplayValue().substring(0,10)} </td>
  </tr>
</table>

的CSS

.priority-1 td:first-child {
  border-left: solid 10px #b30000;
}

.priority-2 td:first-child {
  border-left: solid 10px #ffa500;
}

.priority-3 td:first-child {
  border-left: solid 10px #ffff00;
}

.priority-4 td:first-child {
  border-left: solid 10px #7fbf7f;
}

.priority-other td:first-child {
  border-left: solid 10px #006600;
}

JAVASCRIPT

function bordercolor() {
    var priority = ${gr1.priority.getDisplayValue()};
    var table = document.getElementById("table");

    if (priority <= 4)
        table.className = "priority-" + priority;
    else
        table.className = "priority-other";
}

DEMO