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> 

${gr1.state.getDisplayValue（）}
${gr1.due_date.getDisplayValue（）.substring（0,10）}

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

函数bordercolor（）{
var leftborder=document.getElementById（“行”）；
如果（${gr1.priority.getDisplayValue（）}=1）{
leftborder.style.borderLeft=“solid 10px#b30000”}
如果（${gr1.priority.getDisplayValue（）}=2），则为else{
leftborder.style.borderLeft=“solid 10px#ffa500”}
如果（${gr1.priority.getDisplayValue（）}=3），则为else{
leftborder.style.borderLeft=“solid 10px#ffff00”}
如果（${gr1.priority.getDisplayValue（）}=4），则为else{
leftborder.style.borderLeft=“solid 10px#7fbf7f”}
else{leftborder.style.borderLeft=“solid 10px#006600”}
}

---

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

我不确定

${…}

在您的代码中意味着什么，希望我没有遗漏一些明显的东西，但我认为这是无效的。它闻起来像是某种预处理替换逻辑，但如果没有确认，很难说是肯定的

乍一看，另一个错误是在

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>

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";
}

函数bordercolor（）{
var priority=${gr1.priority.getDisplayValue（）}；
var table=document.getElementById（“表格”）；
如果（priority我不确定
${…}
在您的代码中意味着什么，希望我没有遗漏一些明显的东西，但我无法识别它是有效的。它闻起来像一些预处理替换逻辑，但没有确认很难确定

乍一看，另一个错误是在
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>

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";
}

函数bordercolor（）{
var priority=${gr1.priority.getDisplayValue（）}；
var table=document.getElementById（“表格”）；
如果（优先级

你应该设计最左边的td，你不能在一行上有不同的左边框
id属性应该是唯一的，行作为一个类会更好

尽可能利用现有的变量。这样行吗

<tr class= "rows" data-priority="${gr1.priority.getDisplayValue()}"> 
  <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>


你应该设计最左边的td，你不能在一行上有不同的左边框
id属性应该是唯一的，行作为一个类会更好

尽可能利用现有的变量。这样行吗

<tr class= "rows" data-priority="${gr1.priority.getDisplayValue()}"> 
  <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>

${}语法是ServiceNow中使用的jelly脚本。我将运算符更改为==但仍然不走运。谢谢！@Dave:该表上的每一行都有相同的id，并且您想全部修改吗？如果是这样，它将不会起作用啊，好吧，这是有意义的。我有一个循环，可以查看一个表并生成每一行。我如何将上面的JS代码修改为在这种情况下工作？谢谢！这个${}语法是ServiceNow中使用的jelly脚本。我将运算符更改为==但仍然不走运。谢谢！@Dave:该表上的每一行都有相同的id，并且您想全部修改吗？如果是这样，它将不会起作用啊，好吧，这是有意义的。我有一个循环，可以查看一个表并生成每一行。我如何将上面的JS代码修改为在这种情况下工作？谢谢！