根据表单输入更改html内容

Question

我试图为客户创建在线个性测试我遇到了麻烦，使表格元素按照我希望的方式更新表格。该页面有八个不同的颜色方块，每个方块下方都有一个选择表单元素，选项值介于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>

Answer 1

试试这段代码..

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

Answer 2

＆＃13;

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>

//added variable that is defined by onfocus to pass previously selected value
	function selectRange(elem,val,oldval)
    {
    var color = $("#"+elem).css("background-color");
    var color2 =$("#change"+val).css("background-color");
        if(color2=='transparent')
        {
	//resets background of previously selected value before changing to new selection
        $("#change"+oldval).css("background-color", "transparent"); 
        $("#change"+val).css("background-color", color);
        }
        else
        {
            $("#change"+oldval).css("background-color", "transparent");
            $("#change"+oldval).value(oldval);
			alert("Already Color Set");
			
			// need to reset the value of dropdown that was selected to prevent clearing of previous entry
        }
    }
	
    </script>

＆＃13;

<div style="clear:both">
		<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)">
		</div>
<div style="clear:both; margin: 0px auto 10px auto;">
<?php 
		$nextpagevariable = "Supercalifragilisticexpialidocious";
		$nextpagevariable = sha1($nextpagevariable);
		?>
		<form name="colorselect" method="post" action="sftcount.php?<?php echo $nextpagevariable; ?>&id=1" >
			<select name="color4" id="color4" onfocus="this.oldvalue = this.value" onchange="selectRange(this.id,this.value, this.oldvalue); document.activeElement.blur();" style="width:150px; height: 25px; padding:0; background-color: #0f6700; color: #ffffff">
			<option value="">&nbsp;</option>
			<?php 
				$option = '1';
				while ($option <= '25'){
					echo '<option value="'.$option.'" ';
					if (!empty($color4)){ if ($color4 == $option) { echo "selected "; }}
					echo '>'.$option.'</option>';
					$option ++;
				}
			?>
			</select>
			<select name="color2" id="color2"  onfocus="this.oldvalue = this.value" onchange="selectRange(this.id,this.value, this.oldvalue); document.activeElement.blur();" style="width:150px; height: 25px; padding:0; background-color: #701b55; color: #ffffff">
			<option value="">&nbsp;</option>
			<?php 
				$option = '1';
				while ($option <= '25'){
					echo '<option value="'.$option.'" ';
					if (!empty($color2)){ if ($color2 == $option) { echo "selected "; }}
					echo '>'.$option.'</option>';
					$option ++;
				}
			?>
			</select>
			<select name="color3" id="color3"  onfocus="this.oldvalue = this.value" onchange="selectRange(this.id,this.value, this.oldvalue); document.activeElement.blur();" style="width:150px; height: 25px; padding:0; background-color: #ee8400; color: #ffffff">
			<option value="">&nbsp;</option>
			<?php 
				$option = '1';
				while ($option <= '25'){
					echo '<option value="'.$option.'" ';
					if (!empty($color3)){ if ($color3 == $option) { echo "selected "; }}
					echo '>'.$option.'</option>';
					$option ++;
				}
			?>
			</select>
			</div>
<div style="clear:both;">
		<img value="1" src="sft/images/color1.jpg" draggable="true" ondragstart="drag(event)">
		<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)">
		</div>
		<div style="clear:both;">
			<select name="color1" id="color1" onfocus="this.oldvalue = this.value" onchange="selectRange(this.id,this.value, this.oldvalue); document.activeElement.blur();" style="width:150px; height: 25px; padding:0; background-color: #00243c; color: #ffffff">
			<option value="">&nbsp;</option>
			<?php 
				$option = '1';
				while ($option <= '25'){
					echo '<option value="'.$option.'">'.$option.'</option>';
					$option ++;
				}
			?>
			</select>
		
			<select name="color6" id="color6" onfocus="this.oldvalue = this.value" onchange="selectRange(this.id,this.value, this.oldvalue); document.activeElement.blur();" style="width:150px; height: 25px; padding:0; 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" id="color5" onfocus="this.oldvalue = this.value" onchange="selectRange(this.id,this.value, this.oldvalue); document.activeElement.blur();" style="width:150px; height: 25px; padding:0; background-color: #b00917; color: #ffffff">
			<option value="">&nbsp;</option>
			<?php 
				$option = '1';
				while ($option <= '25'){
					echo '<option value="'.$option.'">'.$option.'</option>';
					$option ++;
				}
			?>
			</select>		
			
		
		</div>

    <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="4%" style="" id="change'.$count.'">'.$count.'</td>';
        $count --;
   }
    ?>
    </tr>

    </table>
	
			<p>
		<div class="backbutton"> Back</div>
		<input type="submit" value="next" class="nextbutton">
		</form>
		</p>
		<p><?php 
		echo $color4;
			
		?></p>
</div>

＆＃13;

＆＃13;

＆＃13;