Question

我有一个表格，我希望每一行的border-left根据优先级别而不同。

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

我不确定${...}代码中的含义是什么，希望我不会错过任何明显的东西，但我认为没有什么是有效的。它闻到了一些预处理替换逻辑，但没有确认很难说肯定。

乍看之下的其他错误是您在=语句中使用assign运算符（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

Answer 2

你应该为最左边的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>

和css这样，定位数据优先级属性

.rows[data-priority="1"] td:first-child{ border-left: 2px solid #234324;}
.rows[data-priority="2"] td:first-child{ /* your css for this one */}
.rows[data-priority="3"] td:first-child{ /* your css for this one */}
/* and so on */

根据值更改边框左侧颜色

2 个答案: