javascript — сделать все столбцы в HTML-таблице редактируемыми, кроме одного
У меня есть HTML-таблица с кнопкой редактирования. Когда кнопка редактирования нажата, она позволяет строке стать редактируемой. Прямо сейчас вся строка является редактируемой, однако я хочу, чтобы строка MR_ID НЕ БЫЛА РЕДАКТИРУЕМОЙ. Как я могу это сделать? Я пытался что-то в моем коде, но это не похоже на работу.
Если мне нужно предоставить больше кода, пожалуйста, дайте мне знать, и я сделаю это.
Это начало моего заявления if, где я считаю, что проблема должна быть:
$(document).on("click", "#html_master .edit", function () {
var $this = $(this);
var tds = $this.closest('tr').find('td').filter(function () {
return $(this).find('.edit').length === 0;
});
if ($this.val() === 'Edit') {
$this.val('Save');
if($this.id != '.mr_id'){
tds.prop('contenteditable', true);
}
}
HTML / PHP для таблицы:
<?php
/* Foreach loop that brings in information to populate table */
foreach ($dbh->query($sql) as $rows){
?>
<tr id="<?php echo intval ($rows['MR_ID'])?>">
<td class="mr_id" id="<?php echo intval ($rows['MR_ID'])?>" contenteditable="false"><?php echo intval ($rows['MR_ID'])?></td>
<td class="mr_name" id="mr_name-<?php echo intval ($rows['MR_ID'])?>" name="field" contenteditable="false"><?php echo $rows['MR_Name']?></td>
<td class="buyer_id" id="buy_id<?php echo intval ($rows['MR_ID'])?>" contenteditable="false"><?php echo $rows['Buyer_ID']?></td>
<td class="poc_n" id="poc_n-<?php echo intval ($rows['MR_ID'])?>" contenteditable="false"><?php echo $rows['MR_POC_N']?></td>
<td class="poc_e" id="poc_e-<?php echo intval ($rows['MR_ID'])?>" contenteditable="false"><?php echo $rows['MR_POC_E']?></td>
<td class="poc_p" id="poc_p-<?php echo intval ($rows['MR_ID'])?>" contenteditable="false"><?php echo $rows['MR_POC_P']?></td>
<td><input type="button" class="edit" name="edit" value="Edit">
</tr>
<?php
}
?>
Решение
Просто расширьте свой фильтр, чтобы не включать mr_id колонка:
$(document).on("click", "#html_master .edit", function() {
var $this = $(this);
var tds = $this.closest('tr').children().filter(function() {
var $thisTd = $(this);
return $thisTd.find('.edit').length === 0 && !$thisTd.hasClass('mr_id');
});
if ($this.val() === 'Edit') {
$this.val('Save');
tds.prop('contenteditable', true);
}
});
Другие решения
Вы можете поместить это прямо в свое первоначальное утверждение поиска.
var tds = $this.closest('tr').find('td').not('.mr_id').filter(function () {
return $(this).find('.edit').length === 0;
})
Другой вариант, если ячейка редактирования всегда последняя, состоит в том, чтобы объединить ее в not заявление
var tds = $this.closest('tr').find('td').not('.mr_id, :last-child')