#javascript #php #jquery #html
#javascript #php #jquery #HTML
Вопрос:
Итак, в настоящее время у меня есть таблица, в которой я могу нажать кнопку и «деактивировать» строку. При деактивации строки все, что происходит, это изменение непрозрачности, и строка отображается серым цветом, что означает, что строка «деактивирована». Кнопка «Деактивировать» также меняется на «Активировать». Чего я хочу, так это иметь возможность затем нажать кнопку «Активировать» и иметь возможность отменить выделение строки серым цветом, а затем кнопка снова изменится на «Деактивировать».
Вот часть моего кода…
HTML / PHP:
<tr>
<td class="mr_id" contenteditable="false"><?php echo intval ($rows['MR_ID'])?></td>
<td class="mr_name" contenteditable="false"><?php echo $rows['MR_Name']?></td>
<td class="buyer_id" contenteditable="false"><?php echo $rows['Buyer_ID']?></td>
<td class="poc_n" contenteditable="false"><?php echo $rows['MR_POC_N']?></td>
<td class="poc_e" contenteditable="false"><?php echo $rows['MR_POC_E']?></td>
<td class="poc_p" contenteditable="false"><?php echo $rows['MR_POC_P']?></td>
<td><button class="edit" name="edit">Edit</button>
<button class="deactivate" name="deactivate">Deactivate</button></td>
</tr>
JavaScript:
// ----- Deactivate Row -----
$(document).ready(function() {
$('.deactivate').click(function() {
var $this = $(this);
if ($this.html() === 'Deactivate') {
$this.html('Activate');
var result = confirm("Are you sure you want to deactivate this entry?");
if(result) {
$this.closest('tr').css('opacity', 0.5);
}
}
});
});
Комментарии:
1. Я удивлен…. ну, просто сделайте противоположное тому, что вы сделали. Используйте переворот, например, значение атрибута, чтобы определить, какое действие предпринять
Ответ №1:
Для достижения этого вам просто нужно немного реструктурировать свою логику, чтобы включить класс в tr элемент, который можно использовать для обозначения его активного состояния. Попробуйте это:
$(document).ready(function() {
$('.deactivate').click(function() {
var $this = $(this);
var $tr = $this.closest('tr');
var action = $tr.hasClass('deactivated') ? 'activate' : 'deactivate';
if (confirm('Are you sure you want to ' action ' this entry?')) {
$tr.toggleClass('deactivated');
$this.text(function(i, t) {
return t == 'Deactivate' ? 'Activate' : 'Deactivate';
});
}
})
}); .deactivated {
opacity: 0.5;
} <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class="mr_id" contenteditable="false">
MR_ID
</td>
<td class="mr_name" contenteditable="false">
MR_Name
</td>
<td class="buyer_id" contenteditable="false">
Buyer_ID
</td>
<td class="poc_n" contenteditable="false">
MR_POC_N
</td>
<td class="poc_e" contenteditable="false">
MR_POC_E
</td>
<td class="poc_p" contenteditable="false">
MR_POC_P
</td>
<td>
<button class="edit" name="edit">Edit</button>
<button class="deactivate" name="deactivate">Deactivate</button>
</td>
</tr>
<tr>
<td class="mr_id" contenteditable="false">
MR_ID
</td>
<td class="mr_name" contenteditable="false">
MR_Name
</td>
<td class="buyer_id" contenteditable="false">
Buyer_ID
</td>
<td class="poc_n" contenteditable="false">
MR_POC_N
</td>
<td class="poc_e" contenteditable="false">
MR_POC_E
</td>
<td class="poc_p" contenteditable="false">
MR_POC_P
</td>
<td>
<button class="edit" name="edit">Edit</button>
<button class="deactivate" name="deactivate">Deactivate</button>
</td>
</tr>
<tr>
<td class="mr_id" contenteditable="false">
MR_ID
</td>
<td class="mr_name" contenteditable="false">
MR_Name
</td>
<td class="buyer_id" contenteditable="false">
Buyer_ID
</td>
<td class="poc_n" contenteditable="false">
MR_POC_N
</td>
<td class="poc_e" contenteditable="false">
MR_POC_E
</td>
<td class="poc_p" contenteditable="false">
MR_POC_P
</td>
<td>
<button class="edit" name="edit">Edit</button>
<button class="deactivate" name="deactivate">Deactivate</button>
</td>
</tr>
<tr>
<td class="mr_id" contenteditable="false">
MR_ID
</td>
<td class="mr_name" contenteditable="false">
MR_Name
</td>
<td class="buyer_id" contenteditable="false">
Buyer_ID
</td>
<td class="poc_n" contenteditable="false">
MR_POC_N
</td>
<td class="poc_e" contenteditable="false">
MR_POC_E
</td>
<td class="poc_p" contenteditable="false">
MR_POC_P
</td>
<td>
<button class="edit" name="edit">Edit</button>
<button class="deactivate" name="deactivate">Deactivate</button>
</td>
</tr>
</table> Комментарии:
1. Ну, один вопрос …. после того, как он стал серым, и я хочу снова активировать…. диалоговое окно по-прежнему говорит: «Вы хотите отключить ввод?» и не активируется…
Ответ №2:
Вместо этого неплохо поиграть с классами. Поэтому, если кнопка / строка деактивирована, присвоите ей класс и переключите его при нажатии кнопки.
Таким образом, код может выглядеть следующим образом,
$('.deactivate').click(function() {
var $this = $(this);
var parentrow=$(this).parents('tr');
if (parentrow.hasClass('deactivated')) {
var result = confirm("Are you sure you want to activate this entry?");
if (result) {
$this.html('Deactivate');
parentrow.css('opacity', 1);
}
} else {
var result = confirm("Are you sure you want to deactivate this entry?");
if (result) {
$this.html('Activate');
parentrow.css('opacity', 0.5);
}
}
parentrow.toggleClass('deactivated');
});
В приведенном выше коде мы сначала проверяем row , вызван ли класс deactivated has, если да, мы спросим пользователя, хочет ли он / она активировать его снова и внести соответствующие изменения.
Если row класс не вызывается deactivated , мы попросим пользователя подтвердить его деактивацию и внести соответствующие изменения.
Мы использовали метод parents() jQuery для доступа к родительскому элементу нажатого элемента.