如何使用 php ajax javascript 根據選定的下拉項更改表格的顏色

Question

我對 php 還很陌生，對 PDO 甚至更新！ 我想要做的是根據表單中下拉菜單的選擇更改行的顏色，但我不知道如何執行此操作！

我只是在谷歌上搜索了一下，沒有找到任何與我想要做的事情接近的東西

這是主表

 <div class="row">
    <div class="large-4 columns">
      <label>Current Status
        <select name="current_status">
            <option>Select Status</option>
            <?php foreach($statuses as $key => $value) : ?>
                <option value="<?php echo $key; ?>"><?php echo $value; ?></option> 
            <?php endforeach; ?>
        </select>
      </label>

這是“關鍵”代碼

'InProgress'=>'In Progress',
'Completed'=>'Completed',
'Unstatused'=>'Unstatused'

這是控制器頁面代碼

  <div class="large-4 columns">
      <label>Select Current Status
          <select name="current_status">
            <?php foreach($statuses as $key => $value) : ?>
                <?php 
                    if($key == $task->current_status) {
                        $selected ='selected';
                    }else{
                        $selected='';
                    }
                ?>
                <option value="<?php echo $key; ?>" <?php echo $selected; ?>><?php echo $value; ?></option> 
            <?php endforeach; ?>
        </select>
      </label>
    </div>

     <input type="hidden" name="id" value="<?php echo $task->id; ?>">
     <input name="submit" type="submit" class="add_btn button right small" value="submit"> 
     <a class="close-reveal-modal" aria-label="Close">&#215;</a>
</form>
</div>

所以我希望可以在這里完成的是； 如果在表單下拉列表中選擇了“已完成” - 那么我想將保持該任務的行顏色更改為紅色，如果他們選擇“未狀態”，我希望將該表行更改為藍色......但我沒有關於如何做到這一點的線索！

    <table><!--start table-->
            <thead><!--create the headers-->
                <tr><!--the table row for the table headers-->
                    <th width="100">task date</th>
                    <th width="450">task title</th>
                    <th width="150">assigned to</th>
                    <th width="100">current status</th>
                    <th width="200">action</th>
                </tr><!--close the table header table row-->
             </thead><!--close the headers-->
                <tbody><!--begin the table body-->
                <?php foreach($tasks as $task) : ?>
                    <tr>
                        <td><?php echo $task->task_date; ?></td>
                        <td><?php echo $task->task_title; ?></td>
                        <td><?php echo $task->assigned_to; ?></td>
                        <td><?php echo $task->current_status; ?></td>

                       <td>
                        <ul class="button-group radius">
<li>
<a href="#" class="button tiny" data-reveal-id="editModal<?php echo $task->id; ?>" data-task-id="<?php echo $task->id; ?>">Edit</a>
<div id= "editModal<?php echo $task->id; ?>" data-cid= "<?php echo $task->id; ?>"  class="reveal-modal editModal" data-reveal>

我想要更改的行是“current_status”行 - 基於他們是否在用於填充表格的表單中選擇了“已完成”或“進行中”。

JEFF-這是完整的代碼頁（控制器頁）

<?php
//create database object
$db = new Database;
//bring in the contacts
$db->query("SELECT * FROM multytasklist");
//assign the resultset
$tasks = $db->resultset();
?>

 <div class="row"><!--begin the row for table data-->
    <div class="large-12 columns"><!--begin columns-->
        <table><!--start table-->
            <thead><!--create the headers-->
                <tr><!--the table row for the table headers-->
                    <th width="100">task date</th>
                    <th width="450">task title</th>
                    <th width="150">assigned to</th>
                    <th width="100">current status</th>
                    <th width="200">action</th>
                </tr><!--close the table header table row-->
             </thead><!--close the headers-->
                <tbody><!--begin the table body-->
                <?php foreach($tasks as $task) : ?>
                    <tr>
                        <td><?php echo $task->task_date; ?></td>
                        <td><?php echo $task->task_title; ?></td>
                        <td><?php echo $task->assigned_to; ?></td>
                        <td><?php echo $task->current_status; ?></td>

                       <td>
                        <ul class="button-group radius">
<li>
<a href="#" class="button tiny" data-reveal-id="editModal<?php echo $task->id; ?>" data-task-id="<?php echo $task->id; ?>">Edit</a>
<div id= "editModal<?php echo $task->id; ?>" data-cid= "<?php echo $task->id; ?>"  class="reveal-modal editModal" data-reveal>

    <h2>EDIT TASK</h2>

   <form id="edit_multytask" action="#" method="POST">

  <div class="row">
    <div class="large-6 columns">
      <label>Task Date
        <input name="task_date" type="text" placeholder="task date.." value="<?php echo $task->task_date; ?>">
      </label>
    </div>

     <div class="large-6 columns">
      <label>Task Title
        <input name="task_title" type="text" placeholder="task title.." value="<?php echo $task->task_title; ?>" >
      </label>
    </div>
  </div>

  <div class="row">
    <div class="large-6 columns">
      <label>Task Description
        <input name="task_description" type="text" placeholder="task description.." value="<?php echo $task->task_description; ?>" >
      </label>
    </div>
    </div>


     <div class="row">
     <div class="large-12 columns">
      <label>assigned to
        <input name="assigned_to" type="text" placeholder="assigned to.." value="<?php echo $task->assigned_to; ?>" >
      </label>
     </div>
     </div> 


   <div class="large-4 columns">
      <label>Select Current Status
          <select name="current_status">
            <?php foreach($statuses as $key => $value) : ?>
                <?php 
                    if($key == $task->current_status) {
                        $selected ='selected';
                    }else{
                        $selected='';
                    }
                ?>
                <option value="<?php echo $key; ?>" <?php echo $selected; ?>><?php echo $value; ?></option> 
            <?php endforeach; ?>
        </select>
      </label>
    </div>

     <input type="hidden" name="id" value="<?php echo $task->id; ?>">
     <input name="submit" type="submit" class="add_btn button right small" value="submit"> 
     <a class="close-reveal-modal" aria-label="Close">&#215;</a>
</form>
</div>
</li>

<li>
    <form id="delete_multytask" action="#" method="post">
        <input type="hidden" name="id" value="<?php echo $task->id; ?>">
        <input type="submit" class="delete_btn button tiny secondary alert" value="delete">
    </form>
</li>
                        </ul><!--close unordered list-->

                       </td><!--close table data-->
                    </tr><!--close table row-->
                   <?php endforeach; ?>
                 </tbody><!--close tbody-->
             </table><!--close table-->
         </div><!--close 12 column class-->
        </div><!--close row-->

Answer 1

這是動態發生的，因此 php 和 pdo 在這種情況下是不合適的。 你的 css 需要是：

<style>
.InProgress { background-color: red; }
.Completed { background-color: orange; }
.Unstatused { background-color: blue; }
</style>

您需要將<select>項更改為：

<select name="current_status" onchange='changeColors(this.value)'>

添加一些 JavaScript：

<script>
function changeColors( value ) {
  var element = document.getElementById('myElementToChange');
  element.className = value;
}

請注意，這是一個粗略的指南，因為您沒有提供完整的 html，所以我只能猜測您想要更改的內容。