#javascript #php
#javascript #php
Вопрос:
Я довольно новичок в 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'
вот код страницы contoroller
<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">amp;#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», основанная на том, выбрали ли они «завершено» или «Выполняется» в форме, которая используется для заполнения таблицы.
ДЖЕФФ — вот полная кодовая страница (страница контроллера)
<?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">amp;#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-->
Комментарии:
1. Неясно, чего вы хотите. Если вы хотите, чтобы цвет менялся при выборе опции on, вам понадобится javascript для добавления соответствующего класса css к элементу. Если вы хотите показать элемент с определенным цветом, вам необходимо установить класс css для элемента в контроллере.
2. итак, я надеюсь, что здесь можно сделать следующее; если в раскрывающемся списке «формы» было выбрано «завершено», тогда я хочу изменить цвет строки, в которой выполняется эта задача, на красный, и если они выберут «неустановленный», я хочу, чтобы эта строка таблицы изменилась на синий. но у меня нетподсказка о том, как это сделать!
3. Где ваша таблица? Какая строка?
4. извините, Дхарман, я отредактировал исходное сообщение, чтобы включить таблицу (ну, большую ее часть в любом случае!) — И не повторяться — но это то, что я хочу; если пользователь выбирает «завершено» (это столбец данных «current_status»), если они выбирают «завершено» вформа — тогда я хотел бы, чтобы строка, в которой они находятся, была изменена на красный цвет, или, если они выбрали «выполняется» в форме для «текущего состояния», тогда я хочу, чтобы строка, на которую они влияют, изменилась на желтый цвет
Ответ №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, поэтому я могу только догадываться, что вы хотите изменить.
Комментарии:
1. привет, Джефф, и спасибо за вашу помощь — я здесь новичок и пытаюсь понять, как этот сайт форматирует вопросы и материалы, поэтому простите меня, если все это кажется таким хаотичным! Я только что опубликовал форму страницы контроллера, чтобы вы могли ее просмотреть, потому что я понимаю, что информация ограничена! Я попробовал то, что вы сказали (добавление в css3 и js), но, увы, он посмеялся надо мной и дал мне золотую бутсу
2. «current_status» — это выпадающее поле в моей форме, и оно содержит 3 значения (завершено, выполняется и не установлено), когда пользователь выбирает строку в таблице, а затем нажимает кнопку редактирования, форма откроется и позволит им изменять информацию (например, изменять «поле формы «current_status» с «выполняется» на «завершено») — и, в свою очередь, после нажатия кнопки отправки формы .. строка в таблице должна отображать цвет в зависимости от статуса, выбранного в форме .. * вау, это много ввода!*