Javascript 基于表单输入更改html内容_Javascript_Php_Jquery_Html_Css

Javascript 基于表单输入更改html内容

javascript php jquery html css

Javascript 基于表单输入更改html内容,javascript,php,jquery,html,css,Javascript,Php,Jquery,Html,Css,我正在尝试为一个客户创建一个在线个性测试，我在以我希望的方式更新表格元素时遇到了问题。该页面有八个不同的颜色方块，每个方块下面有一个select form元素，选项值介于1和25之间。当用户选择值时（25表示最喜欢，1表示该颜色最不喜欢），在颜色下面有一个表格，其中有两行25个正方形，我希望根据选择进行更新。例如，对于第一个选择器，颜色为深绿色，如果用户选择数字22，则我希望标记为22的单元格下方的单元格变为深绿色。此外，用户只能选择一个特定值一次，因为同一个数字不能分配多个颜色。非常感谢您的帮

我正在尝试为一个客户创建一个在线个性测试，我在以我希望的方式更新表格元素时遇到了问题。该页面有八个不同的颜色方块，每个方块下面有一个select form元素，选项值介于1和25之间。当用户选择值时（25表示最喜欢，1表示该颜色最不喜欢），在颜色下面有一个表格，其中有两行25个正方形，我希望根据选择进行更新。例如，对于第一个选择器，颜色为深绿色，如果用户选择数字22，则我希望标记为22的单元格下方的单元格变为深绿色。此外，用户只能选择一个特定值一次，因为同一个数字不能分配多个颜色。非常感谢您的帮助

<img value="4" src="sft/images/color4.jpg" draggable="true" ondragstart="drag(event)">
    <img value="2" src="sft/images/color2.jpg" draggable="true" ondragstart="drag(event)">
    <img value="3" src="sft/images/color3.jpg" draggable="true" ondragstart="drag(event)">
    <img value="1" src="sft/images/color1.jpg" draggable="true" ondragstart="drag(event)">
    <form name="colorselect" action="#">
        <select name="color4" style="width:150px; margin-bottom: 10px; background-color: #0f6700; color: #ffffff">
        <option value="">&nbsp;</option>
        <?php 
            $option = '1';
            while ($option <= '25'){
                echo '<option value=/"'.$option.'">'.$option.'</option>';
                $option ++;
            }
        ?>
        </select>
        <select name="color2" style="width:150px;margin-bottom: 10px; background-color: #701b55; color: #ffffff">
        <option value="">&nbsp;</option>
        <?php 
            $option = '1';
            while ($option <= '25'){
                echo '<option value=/"'.$option.'">'.$option.'</option>';
                $option ++;
            }
        ?>
        </select>
        <select name="color3" style="width:150px;margin-bottom: 10px;  background-color: #ee8400; color: #ffffff">
        <option value="">&nbsp;</option>
        <?php 
            $option = '1';
            while ($option <= '25'){
                echo '<option value=/"'.$option.'">'.$option.'</option>';
                $option ++;
            }
        ?>
        </select>
        <select name="color1" style="width:150px;margin-bottom: 10px;  background-color: #00243c; color: #ffffff">
        <option value="">&nbsp;</option>
        <?php 
            $option = '1';
            while ($option <= '25'){
                echo '<option value=/"'.$option.'">'.$option.'</option>';
                $option ++;
            }
        ?>
        </select>

    <img value="6" src="sft/images/color6.jpg" draggable="true" ondragstart="drag(event)">
    <img value="5" src="sft/images/color5.jpg" draggable="true" ondragstart="drag(event)">
    <img value="7" src="sft/images/color7.jpg" draggable="true" ondragstart="drag(event)">
    <img value="8" src="sft/images/color8.jpg" draggable="true" ondragstart="drag(event)">
        <select name="color6" style="width:150px;margin-bottom: 10px;  background-color: #74bf12; color: #ffffff">
        <option value="">&nbsp;</option>
        <?php 
            $option = '1';
            while ($option <= '25'){
                echo '<option value=/"'.$option.'">'.$option.'</option>';
                $option ++;
            }
        ?>
        </select>       
        <select name="color5" style="width:150px;margin-bottom: 10px;  background-color: #b00917; color: #ffffff">
        <option value="">&nbsp;</option>
        <?php 
            $option = '1';
            while ($option <= '25'){
                echo '<option value=/"'.$option.'">'.$option.'</option>';
                $option ++;
            }
        ?>
        </select>       
        <select name="color7" style="width:150px;margin-bottom: 10px;  background-color: #000000; color: #ffffff">
        <option value="">&nbsp;</option>
        <?php 
            $option = '1';
            while ($option <= '25'){
                echo '<option value=/"'.$option.'">'.$option.'</option>';
                $option ++;
            }
        ?>
        </select>       
        <select name="color8" style="width:150px;margin-bottom: 10px;  background-color: #FFFFFF">
        <option value="">&nbsp;</option>
        <?php 
            $option = '1';
            while ($option <= '25'){
                echo '<option value=/"'.$option.'">'.$option.'</option>';
                $option ++;
            }
        ?>
        </select>
    </form>

    <table id="sftTable">
    <tr>
        <td colspan="5" style="border-top:none;border-right:none;border-left:none">Strong Like</td>
        <td colspan="5" style="border-top:none;border-right:none;border-left:none">Like</td>
        <td colspan="5" style="border-top:none;border-right:none;border-left:none">Nuetral</td>
        <td colspan="5" style="border-top:none;border-right:none;border-left:none">Dislike</td>
        <td colspan="5" style="border-top:none;border-right:none;border-left:none">Strong Dislike</td>
    </tr>
    <tr>
    <?php $count = '25';
        while ($count >= '1' ) {
            echo '<td width=/"30px/">'.$count.'</td>';
            $count --;

        }
        ?>
    </tr>
    <tr height="30px">
        <?php $count = '25';
        while ($count >= '1' ) {
            echo '<td width=/"30px/" id=/"'.$count.'">&nbsp;</td>';
            $count --;

        }
        ?>
    </tr>
    </table>


强壮的
喜欢
纽特拉尔
不喜欢
强烈厌恶

试试这段代码

<!DOCTYPE html>
    <html lang="en">
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>
    function selectRange(elem,val)
    {
    var color = $("#"+elem).css("background-color");
    var color2 =$("#change"+val).css("background-color");
        if(color2=='transparent')
        {
        $("#change"+val).css("background-color", color);
        }
        else
        {
            alert("Already Color Set");
        }
    }
    </script>
    </head>
    <body>
    <form name="colorselect" action="#">
    <select name="color1" id="color1" onchange="selectRange(this.id,this.value);" style="width:150px; margin-bottom: 10px; background-color: #0f6700; color: #ffffff">
    <option value="">&nbsp;</option>
    <?php 
        $option = '1';
        while ($option <= '5'){
            echo '<option value="'.$option.'">'.$option.'</option>';
            $option ++;
        }
    ?>
    </select>
    <select name="color2" id="color2" onchange="selectRange(this.id,this.value);" style="width:150px;margin-bottom: 10px; background-color: #701b55; color: #ffffff">
    <option value="">&nbsp;</option>
    <?php 
        $option = '1';
        while ($option <= '5'){
            echo '<option value="'.$option.'">'.$option.'</option>';
            $option ++;
        }
    ?>
    </select>
    <select name="color3" id="color3" onchange="selectRange(this.id,this.value);" style="width:150px;margin-bottom: 10px;  background-color: #ee8400; color: #ffffff">
    <option value="">&nbsp;</option>
    <?php 
        $option = '1';
        while ($option <= '5'){
            echo '<option value="'.$option.'">'.$option.'</option>';
            $option ++;
        }
    ?>
    </select>
    <select name="color4" id="color4" onchange="selectRange(this.id,this.value);" style="width:150px;margin-bottom: 10px;  background-color: #b00917; color: #ffffff">
    <option value="">&nbsp;</option>
    <?php 
        $option = '1';
        while ($option <= '5'){
            echo '<option value="'.$option.'">'.$option.'</option>';
            $option ++;
        }
    ?>
    </select>
    <select name="color5" id="color5" onchange="selectRange(this.id,this.value);" style="width:150px;margin-bottom: 10px;  background-color: #000000; color: #ffffff">
    <option value="">&nbsp;</option>
    <?php 
        $option = '1';
        while ($option <= '5'){
            echo '<option value="'.$option.'">'.$option.'</option>';
            $option ++;
        }
    ?>
    </select>

    </form>

    <table id="sftTable">
    <tr>
    <td  style="border-top:none;border-right:none;border-left:none">Strong <br/>Like</td>
    <td  style="border-top:none;border-right:none;border-left:none">Like</td>
    <td  style="border-top:none;border-right:none;border-left:none">Nuetral</td>
    <td  style="border-top:none;border-right:none;border-left:none">Dislike</td>
    <td  style="border-top:none;border-right:none;border-left:none">Strong<br/> Dislike</td>
    </tr>
    <tr>
    <?php $count = '5';
    while ($count >= '1' ) {
        echo '<td width="30px" style="" id="change'.$count.'">'.$count.'</td>';
        $count --;
   }
    ?>
    </tr>

    </table></body>
    </html>


功能选择范围（元素、值）
{
var color=$（“#”+elem）.css（“背景色”）；
var color2=$（“#更改”+val）.css（“背景色”）；
if（color2=='transparent'）
{
$（“#更改”+val）.css（“背景色”，颜色）；
}
其他的
{
警报（“已设置颜色”）；
}
}
Strong
喜欢
喜欢
纽特拉尔
不喜欢
强烈的厌恶


//添加了onfocus定义的变量，以传递以前选择的值
功能选择范围（元素、值、旧值）
{
var color=$（“#”+elem）.css（“背景色”）；
var color2=$（“#更改”+val）.css（“背景色”）；
if（color2=='transparent'）
{
//在更改为新选择之前，重置先前选定值的背景
$（“#更改”+oldval）.css（“背景色”、“透明”）；
$（“#更改”+val）.css（“背景色”，颜色）；
}
其他的
{
$（“#更改”+oldval）.css（“背景色”、“透明”）；
$（#更改“+oldval）.value（oldval）；
警报（“已设置颜色”）；
//需要重置所选下拉列表的值，以防止清除以前的条目
}
}


强壮的
喜欢
纽特拉尔
不喜欢
强烈厌恶

返回

太棒了！谢谢你的帮助！萨拉瓦南议员，再次感谢您的回复。这正是我想要的。在进一步的测试中，我发现了一个我没有想到的新问题，如果用户选择和选项，然后改变主意，原始选择仍然是所选颜色以及新颜色。你有没有建议把最初的选择弄清楚？@keycrew你能解释清楚吗。我没有得到你想要的。也接受答案。再次感谢萨拉瓦南，通过一点点涉猎，我能够解决我问题的最后一半。不确定这是否一定是最好的方法，但似乎有效。我继续对代码的以下答案进行了修改。再次感谢saravanan mp提供的初始代码。这只是一个带有附加功能的修订版。没有帮助不可能走这么远