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

Question

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

我的 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>

对我做错了什么有什么建议吗？

Answer 1

我不确定 ${...} 在您的代码中是什么意思，希望我没有遗漏一些明显的东西，但我无法将其识别为有效的东西。它闻起来有些预处理替换逻辑，但没有确认很难确定。

乍一看还有一点不对劲，就是您在 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