更改下拉列表中每個行的選擇更改的文本顏色

我在一行上有不同顏色的下拉列表，當選擇列表時，我想將該行上的文本顏色值更改爲選擇。每行有一個下拉列表字段，每次用戶選擇下拉列表中的所有字段都會改變相同的顏色。更改下拉列表中每個行的選擇更改的文本顏色

<html> 
<head> 

<script type="text/javascript"> 
    function updateTextColour(value) { 
      if (dropdownList.value > 0) { 
       dropdownList.style.color = 'red'; 
       //document.body.style.color = '#' + value; 
     } }   
    </script>   
    <style type="text/css">.style1 {color: #FF0000;}</style 
</head> 
<body> 
    <form>Change the text color: <br> 
     <table> 
     <tr> 
    <td id="1" style="width:40px">1</td> 
    <td id="1" style="width:180px" class="style7"> 
     <span class="style1"><span class="style1">   
     <select name="backGround" size="1" onChange="updateTextColour(this.value);"><!--changeColor(this.selected);"--> 
      <option value="FF0400" style="color:red">[Red]</option> 
      <option value="05EF00" style="color:Green">[Green]</option> 
      <option value="0206FF" style="color:Blue">[Blue]</option> 
      <option value="000000" selected>[black]</option> 
     </select></span></span></td> 
     <td "width:auto" class="style8">Need to change to color row 1</td> 
     <br><br></tr> 
     <table> 
     <tr> 
     <td id="2" style="width:40px">2</td> 
     <td id="2" style="width:180px" class="style7"> 

     <span class="style1"><span class="style1"> 
     <select name="backGround2" size="1" onChange="updateTextColour(this.value);"><!--changeColor(this.selected);"--> 
      <option value="000000">[Black]</option> 
      <option value="FF0400" style="color:red">[Red]</option> 
      <option value="EFE800" style="color:Yellow">[Yellow]</option> 
      <option value="05EF00" style="color:Green">[Green]</option> 
      <option value="0206FF" style="color:Blue">[Blue]</option> 
      <option value="FFFFFF" selected>[White]</option> 
     </select></span></span> </td> 
     <td "width:auto" class="style8">Need to change to color row 2</td> 
     </tr> 
     </table></table> 
    </form> 
</body>

來源

2013-08-25 user2714788

您需要爲這個在JavaScript中的變化工作。

Working Solution

使用此Javascript

function updateTextColourrow1(value){   
    document.getElementsByClassName("style8")[0].style.color="#"+value; 
} 
function updateTextColourrow2(value){ 
    document.getElementsByClassName("style8")[1].style.color="#"+value; 
}

我用了兩個功能分別訪問了兩行。這也可以只使用一個功能來完成。

Era800's方法。

function updateTextColour(sender) { 
    var tempie = sender; //the dropdown list object 

    //Find the table row of the dropdown list. 
    while (tempie.parentNode.nodeName != 'TR') { 
     tempie = tempie.parentNode; 
    } 
    //Get the selected color. 
    var selectedColor = '#' + sender.value; 

    //Set the row to the selected color. 
    tempie.parentNode.style.color = selectedColor; 
}

有需要在era800貼，你需要前綴 '＃' 到VAR的SelectedValue腳本做一個細微的變化。

Working Solution

來源

2013-08-25 07:11:05 MarsOne

您好，感謝這麼多的快速回應，我是新來這個，做了嘗試這兩種代碼，但似乎並沒有像這行得通。也許我做得不對。我的故事會有很多行，每一行都有倒行列表字段，並且dorpdown列表有三個選擇，（1）紅色（2）cr – user2714788

所以第二個解決方案將工作得很好。他們怎麼沒有工作。我測試了所有瀏覽器 – MarsOne

嘗試通過this而不是this.value爲updateTextColour。

例子：onChange="updateTextColour(this);"

，並使用此JavaScript函數：

function updateTextColour(sender) { 
    var tempie = sender; //the dropdown list object 

    //Find the table row of the dropdown list. 
    while (tempie.parentNode.nodeName != 'TR'){ 
     tempie = tempie.parentNode; 
    } 
    //Get the selected color. 
    var selectedColor = sender.value; 

    //Set the row to the selected color. 
    tempie.parentNode.style.color = selectedColor; 
}

來源

2013-08-25 08:47:28 era800

的代碼還不錯。需要稍作改動，並且會起作用。我將在小提琴中更新 – MarsOne

你是最棒的，而且工作得很好。只是想知道FF是否工作正常，但不在IE中。任何建議，非常感謝 – user2714788

沒關係，這是我需要打開活動的X ..再次感謝您的幫助......非常感謝。 – user2714788

更改下拉列表中每個行的選擇更改的文本顏色

回答

相關問題