Кнопка и функции, доступные для редактирования

ProgramBox

Кнопка и функции, доступные для редактирования

Post author:admin
Запись опубликована:18 февраля, 2023
Post category:Вопросы по программированию

#javascript #php #jquery #html #contenteditable

#javascript #php #jquery #HTML #с возможностью редактирования содержимого

Вопрос:

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

Мой вопрос состоит из двух частей…

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

Соответствующий 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);
        }
    });
    });

Ответ №1:

Взгляните на функцию jquery .not, чтобы удалить определенные элементы из вашего выбора.

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

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

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

1. Спасибо за ответ. Это исправило функцию кнопки сохранения, но у меня все еще возникают проблемы с редактируемым контентом feature…it все еще позволяет мне редактировать ячейку mr_id.

2. Неважно, я заставил это работать. Я забыл изменить идентификатор mr_id на КЛАСС в моем HTML-коде … спасибо!

Ответ №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 amp;amp; $(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>