Javascript 根据下拉列表中的值更改文本框背景颜色_Javascript_Php_Jquery_Html

Javascript 根据下拉列表中的值更改文本框背景颜色

javascript php jquery html

Javascript 根据下拉列表中的值更改文本框背景颜色,javascript,php,jquery,html,Javascript,Php,Jquery,Html,我有一个表格，每行有文本框和下拉列表。当我从相对字段的下拉列表中选择“缺席”时，我想更改该行文本框的背景颜色。我使用的javascript很好，但只适用于第一行： <script> function changeBack() { var inputVal = document.getElementById("attendance_status"); var textbx = document.getElementById("stname"); var tex

我有一个表格，每行有文本框和下拉列表。当我从相对字段的下拉列表中选择“缺席”时，我想更改该行文本框的背景颜色。我使用的javascript很好，但只适用于第一行：

<script>

function changeBack() {
    var inputVal = document.getElementById("attendance_status");
    var textbx = document.getElementById("stname");
    var textbxsur = document.getElementById("stsurname");
    if (inputVal.value == "0") {
        textbx.style.backgroundColor = "red";
        textbxsur.style.backgroundColor = "red";
    }
    else{
        textbx.style.backgroundColor = "";
        textbxsur.style.backgroundColor = "";
    }
}

changeBack();

</script>

该表通过php生成，如下所示：

$query = ("SELECT * FROM `b10_18591250_JC`.`STUDENT` WHERE `ST_GROUP` = $st_group");
   $result = mysql_query($query);

while( $row = mysql_fetch_array($result))

{

 echo "<tr>";
  echo "<td>" . "<input name=stid[] readonly type=number class=form-control value=" .$row['ID']." </td>";
  echo "<td>" . "<input name=stname id=stname readonly type=text class=form-control value=" .$row['NAME']." </td>";
  echo "<td>" . "<input name=stsurname id=stsurname readonly type=text  class=form-control value=" .$row['SURNAME']." </td>";

echo "<td>";
echo "<select class=form-control name=attendance_status[] id=attendance_status onchange='changeBack()'>";
echo "<option value=1>Present</option>";
echo "<option value=0>Absent</option>";
echo "</select>";

echo "</td>";
echo "</tr>"; 

}

由于您使用的是id，id应该是唯一的，不应该重复，但是在每个选择框的代码中，在while循环中分配了相同的id，因此它将更改id状态为的元素的第一次出现的样式。在这种情况下，请使用类而不是id

id的使用是为了优化搜索算法，以便在找到具有给定id的元素后，只找到一个元素，它将停止进一步搜索，因此不会对其他元素产生任何影响。

由于您使用的是id，id应该是唯一的，不应该重复，但在您的代码中，对于每个选择框，都会在while循环中分配相同的id，因此，它将更改id为U状态的元素的第一次出现的样式。在这种情况下，请使用类而不是id

id的使用是为了优化搜索算法，以便在找到具有给定id的元素后，只找到一个元素，并停止进一步搜索，因此不会对其他元素产生任何影响。

以下是使用jQuery的示例，可能对您有用：

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <table>
        <tr>
            <td>ID</td>
            <td>Name</td>
            <td>Status</td>
        </tr>
        <?php for($i=1; $i<4; $i++) { ?>
        <tr>
            <td><?= $i ?></td>
            <td><?= 'Name'.$i ?></td>
            <td><select><option value="p">Present</option><option value="a">Absent</option></select></td>
        </tr>
        <?php } ?>
    </table>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('select').change(function() {
            if($(this).val() == 'a') {
                $(this).css('background-color','#F00');
                $(this).parent().parent().css('background-color','#F00');
            } else {
                $(this).css('background-color','#FFF');
                $(this).parent().parent().css('background-color','#FFF');
            }
        });
    });
</script>
</body>
</html>

以下是使用jQuery的示例，可能对您有用：

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <table>
        <tr>
            <td>ID</td>
            <td>Name</td>
            <td>Status</td>
        </tr>
        <?php for($i=1; $i<4; $i++) { ?>
        <tr>
            <td><?= $i ?></td>
            <td><?= 'Name'.$i ?></td>
            <td><select><option value="p">Present</option><option value="a">Absent</option></select></td>
        </tr>
        <?php } ?>
    </table>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('select').change(function() {
            if($(this).val() == 'a') {
                $(this).css('background-color','#F00');
                $(this).parent().parent().css('background-color','#F00');
            } else {
                $(this).css('background-color','#FFF');
                $(this).parent().parent().css('background-color','#FFF');
            }
        });
    });
</script>
</body>
</html>

将id更改为类。当您使用Id时，您的代码只接受第一个元素

var inputVal = document.getElementsByClassName("attendance_status");
var textbx = document.getElementsByClassName("stname");
var textbxsur = document.getElementsByClassName("stsurname");

将id更改为类。当您使用Id时，您的代码只接受第一个元素

var inputVal = document.getElementsByClassName("attendance_status");
var textbx = document.getElementsByClassName("stname");
var textbxsur = document.getElementsByClassName("stsurname");