0

I have a dropdown list of different colors on one row, and when list selected, i would like to change a value of text color on that row to the value of the selection. 每行都有一个下拉列表字段，每次用户选择下拉列表时，该字段上的所有字段都会更改相同的颜色。

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

4

2 回答 2

0

您需要更改 Javascript 才能使其正常工作。

工作解决方案

使用这个 Javascript

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

我使用了两个函数来分别访问这两行。这也可以只使用一个函数来完成。

Era800的方法。

JS

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 前加上'#'。

工作解决方案

于 2013-08-25T07:11:05.090 回答
0

尝试传递this而不是this.valueinto 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-25T08:47:28.537 回答