如何使用php ajax javascript根据选定的下拉项更改表的颜色

I am fairly new to php and even newer to PDO! what I am trying to do is change the color of the row based on selection of a drop down in my form, but I do not have a clue how to do this!

I have only been googling around for a bit about this, have not found anything that is close to what I am trying to do

here is the main table

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

here is the "key" code

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

here is the contoroller page code

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

so what I am hoping can be done here is; if "completed" was selected in the forms dropdown - then I want to change the row color that holds that task to red, and if they select "unstatused" i want to have that table row change to blue..but i do not have a clue as to how to do this!

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

the row I want to change is the "current_status" row - based on if they selected "completed" or "In Progress" in the form that is used to populate the table.

JEFF- here is the full code page (the controller page)

<?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-->
doukong5394
doukong5394 对不起Dharman-我编辑了原始帖子以包括表格(好吧,大部分反正!)-而不是不断重复自己-但这就是我想要的;如果用户选择“已完成”(这是“current_status”数据表列),如果他们在表单中选择“已完成”-那么我希望他们所在的行变为红色,或者如果他们有在“当前状态”的形式中选择“进行中”然后我希望他们正在影响的行变为黄色
一年多之前 回复
douganbi7686
douganbi7686 你的桌子在哪里?哪排?
一年多之前 回复
douci2022
douci2022 所以我希望能在这里完成的是;如果在表单下拉列表中选择了“已完成”-那么我想将保存该任务的行颜色更改为红色,如果他们选择“未使用”,我希望将该表行更改为蓝色..但我没有关于如何做到这一点的线索!
一年多之前 回复
duangan6636
duangan6636 目前还不清楚你想要什么。如果您希望在选择选项时更改颜色,则需要使用javascript将相应的css类添加到项目中。如果您想要显示具有特定颜色的项目,则需要为控制器中的项目设置css类。
一年多之前 回复

1个回答

This is happening dynamically so php and pdo are inappropriate in this situation. Your css needs to be:

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

You need to change the <select> item to:

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

Add some JavaScript:

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

Please note that this is a rough guideline as you have not provided the full html so I can only guess at what you want to change.

dongli5785
dongli5785 “current_status”是我表单中的一个下拉字段,当用户在表格中选择一行时,它包含3个值(已完成,正在进行和未被使用) - 然后单击编辑按钮, - 表单将打开并允许 他们更改信息(例如将“current_status”表单字段从“正在进行中”更改为“已完成”) - 然后,在点击表单提交按钮后...表中的行应显示基于状态的颜色 他们选择的形式是...... *哇,这就是很多打字!*
一年多之前 回复
dsb238100
dsb238100 杰夫,谢谢你的帮助 - 我是新来的,我想弄清楚这个网站如何格式化问题和东西,请原谅我,如果这一切看起来都那么混乱! 我刚刚发布了控制器页面表格供你查看 - 因为我知道信息有限! 我确实尝试过你所说的(添加到css3和js)但唉它嘲笑我并给了我金靴LOLL
一年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐