基於值更改邊框左邊的顏色

我有一張表，我希望每行的邊框左邊根據優先級別不同。基於值更改邊框左邊的顏色

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

什麼，我做錯了什麼建議？

來源

2016-10-18 Dave

我不確定什麼${...}意味着在你的代碼裏面，希望我不會錯過某些明顯的東西，但它不是我認爲有效的東西。它聞到一些預處理替代邏輯，但沒有確認很難說肯定。

別的東西，這是錯誤乍一看，您使用的if語句而不是平等的經營者賦值運算符（=）的事實（==）

另一個問題是，tr不能拿邊框。下面你會發現我將如何實現這一點。注意使用css類而不是直接操作元素邊框。我也asigning一個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

來源

2016-10-18 20:54:51

的$ {}語法中的ServiceNow使用果凍腳本。我改變了運算符==但仍然沒有運氣。謝謝！ – Dave

@Dave：那張桌子上的每一行都有相同的ID，你想修改所有的？如果是這樣的話，這不會起作用 –

啊，這是合理的。我有一個循環，它通過一個表來查看並生成每一行。我如何修改上面的JS代碼來在這個實例中工作？謝謝！ – Dave

你應該造型最左邊的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 */

來源

2016-10-19 15:27:18 daveyfaherty

基於值更改邊框左邊的顏色

回答

相關問題