Javascript 更改每行下拉列表中的选择时更改文本颜色_Javascript_Html_Css

Javascript 更改每行下拉列表中的选择时更改文本颜色

javascript html css

Javascript 更改每行下拉列表中的选择时更改文本颜色,javascript,html,css,Javascript,Html,Css,我在一行上有一个不同颜色的下拉列表，当选择该列表时，我想将该行上文本颜色的值更改为选择的值。每一行都有一个下拉列表字段，每次用户选择下拉列表时，其上的所有字段都将改变相同的颜色 <html> <head> <script type="text/javascript"> function updateTextColour(value) { if (dropdownList.value > 0) {

我在一行上有一个不同颜色的下拉列表，当选择该列表时，我想将该行上文本颜色的值更改为选择的值。每一行都有一个下拉列表字段，每次用户选择下拉列表时，其上的所有字段都将改变相同的颜色

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


函数updateTextColor（值）{
如果（dropdownList.value>0）{
dropdownList.style.color='红色'；
//document.body.style.color='#'+值；
} }           
.style1{color:#FF0000；}
您需要对Javascript进行更改才能使其正常工作

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

我使用了两个函数分别访问这两行。这也可以只使用一个函数来完成
Era800的方法
JS
era800发布的脚本中需要做一点小小的更改，您需要在var selectedvalue前面加上前缀“#”
尝试将此
而不是此.value
传递到updateTextColor
中
示例：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;
}

不错。需要稍微修改一下，就行了。我会用小提琴更新你是最棒的，而且效果很好。只是想知道FF是否工作良好，但不在IE中。任何建议，非常感谢，这是我需要打开active X的工作。再次感谢您的帮助。非常感谢。嗨，非常感谢您的快速响应，我是新手，并尝试了这两种代码，但似乎不起作用。也许我做得不对。我的故事将有很多行，每行有一个下拉列表字段，dorpdown列表有三个选择，（1）红色（2）crSo第二个解决方案将工作得很好。为什么他们不工作。我在所有浏览器中测试了代码
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;
}