値に基づいて境界線の左の色を変更する

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をasigningと

JAVASCRIPT代わりに行

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

のスタイルを適用するには、このコントロールを使用しています

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 */