Button и ContentEditable Функции

Question

У меня есть таблица, которая включает в себя как кнопку «Редактировать/Сохранить», так и «Удалить». Всякий раз, когда я нажимаю кнопку «Изменить», он делает строки редактируемыми и меняет кнопку «Сохранить», поэтому я могу сохранить изменения. Однако, когда я это делаю, он делает каждую ячейку редактируемой, и только первая строка работает с кнопкой редактирования. Это не работает для второго ряда, третий ряд и т.д.

Моего вопрос два партера ...

1. Как я могу сделать определенные ячейки в строке не редактируются и другие редактируемыми? Я специально хочу, чтобы первая ячейка «MR_ID» не редактировалась.

2. Как я могу заставить функцию редактирования работать для нескольких строк, а не только для первой строки?

Соответствующий HTML/PHP код:

<?php 
    foreach ($dbh->query($sql) as $rows){ 
    ?> 
    <tr> 
     <td id="mr_id" contenteditable="false"><?php echo intval ($rows['MR_ID'])?></td> 
     <td id="mr_name" contenteditable="false"><?php echo $rows['MR_Name']?></td> 
     <td id="buyer_id" contenteditable="false"><?php echo $rows['Buyer_ID']?></td> 
     <td id="poc_n" contenteditable="false"><?php echo $rows['MR_POC_N']?></td>  
     <td id="poc_e" contenteditable="false"><?php echo $rows['MR_POC_E']?></td> 
     <td id="poc_p" contenteditable="false"><?php echo $rows['MR_POC_P']?></td> 
     <td><button id="edit" name="edit">Edit</button> 
     <button id="delRow" name="delete" onclick="deleteRow(this)">Delete</button></td> 
    </tr> 

Соответствующий Javascript код:

$(document).ready(function() { 
    $('#edit').click(function() { 
     var $this = $(this); 
     var tds = $this.closest('tr').find('td').filter(function() { 
      return $(this).find('#edit').length === 0; 
     }); 
     if ($this.html() === 'Edit') { 
      $this.html('Save'); 
      tds.prop('contenteditable', true); 
     } else { 
      $this.html('Edit'); 
      tds.prop('contenteditable', false); 
     } 
    }); 
    }); 

Answer 1

Посмотрите на JQuery .not function, чтобы удалить определенные элементы из вашего выбора.

Ваша функция работает только для первой строки, потому что вы используете идентификаторы на tds. У вас должен быть только один элемент с определенным идентификатором на странице. Измените их на классы, и ваш код должен работать. Вы также специально нацеливаете ближайшую строку, и поэтому получите только первое.

После того, как вы закрепили эти вещи ваш код должен выглядеть примерно так:

var tds = $this.find('tr td').not('.mr_id').filter .... 

Answer 2

Ваша главная проблема заключается в: идентификаторы должны быть уникальными.

Поэтому я предлагаю вам преобразовать идентификаторы в классы.

Как не сделать редактируемым «mr_id» клетки Вы делаете хорошо Добавить в фильтре:.

$(this).is(':not(.mr_id)') 

Сниппет:

function deleteRow(obj) { 
 
    $(obj).closest('tr').remove(); 
 
} 
 

 
$(document).ready(function() { 
 
    $('.edit').on('click', function(e) { 
 
    var $this = $(this); 
 
    var tds = $this.closest('tr').find('td').filter(function() { 
 
     return $(this).find('.edit').length === 0 && $(this).is(':not(.mr_id)'); 
 
    }); 
 
    if ($this.html() === 'Edit') { 
 
     $this.html('Save'); 
 
     tds.css('background-color', 'grey').prop('contenteditable', true); 
 
    } else { 
 
     $this.html('Edit'); 
 
     tds.css('background-color', 'white').prop('contenteditable', false); 
 
    } 
 
    }); 
 
});

table, th, td { 
 
    border: 1px solid black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<table> 
 
    <tr> 
 
     <td class="mr_id" contenteditable="false">1111</td> 
 
     <td class="mr_name" contenteditable="false">1111</td> 
 
     <td class="buyer_id" contenteditable="false">1111</td> 
 
     <td class="poc_n" contenteditable="false">1111</td> 
 
     <td class="poc_e" contenteditable="false">111</td> 
 
     <td class="poc_p" contenteditable="false">111</td> 
 
     <td><button class="edit" name="edit">Edit</button> 
 
      <button class="delRow" name="delete" onclick="deleteRow(this)">Delete</button></td> 
 
    </tr> 
 
    <tr> 
 
     <td class="mr_id" contenteditable="false">1111</td> 
 
     <td class="mr_name" contenteditable="false">1111</td> 
 
     <td class="buyer_id" contenteditable="false">1111</td> 
 
     <td class="poc_n" contenteditable="false">1111</td> 
 
     <td class="poc_e" contenteditable="false">111</td> 
 
     <td class="poc_p" contenteditable="false">111</td> 
 
     <td><button class="edit" name="edit">Edit</button> 
 
      <button class="delRow" name="delete" onclick="deleteRow(this)">Delete</button></td> 
 
    </tr> 
 
    <tr> 
 
     <td class="mr_id" contenteditable="false">1111</td> 
 
     <td class="mr_name" contenteditable="false">1111</td> 
 
     <td class="buyer_id" contenteditable="false">1111</td> 
 
     <td class="poc_n" contenteditable="false">1111</td> 
 
     <td class="poc_e" contenteditable="false">111</td> 
 
     <td class="poc_p" contenteditable="false">111</td> 
 
     <td><button class="edit" name="edit">Edit</button> 
 
      <button class="delRow" name="delete" onclick="deleteRow(this)">Delete</button></td> 
 
    </tr> 
 
    <tr> 
 
     <td class="mr_id" contenteditable="false">1111</td> 
 
     <td class="mr_name" contenteditable="false">1111</td> 
 
     <td class="buyer_id" contenteditable="false">1111</td> 
 
     <td class="poc_n" contenteditable="false">1111</td> 
 
     <td class="poc_e" contenteditable="false">111</td> 
 
     <td class="poc_p" contenteditable="false">111</td> 
 
     <td><button class="edit" name="edit">Edit</button> 
 
      <button class="delRow" name="delete" onclick="deleteRow(this)">Delete</button></td> 
 
    </tr> 
 
</table>