Блог

Главная - Вопросы по программированию - Очистите данные таблицы в редактируемой таблице при фокусировке с помощью JavaScript или jQuery

Очистите данные таблицы в редактируемой таблице при фокусировке с помощью JavaScript или jQuery

#javascript #html #jquery

Вопрос:

Мне нужно очистить данные в HTML td onfocus, аналогично тому, как это работает при вводе HTML, но в редактируемой таблице, которая использует jQuery tabledit. Причина в том, что это таблица CRUD, и она заполняет таблицу данными из базы данных. Если я хочу отредактировать один из td, я не хочу удалять существующие данные, но, скорее, когда я нажимаю на td, значение устанавливается равным»», и я могу просто ввести новые данные.

 <td><?php echo $row['payment_company']; ?></td>

Я попытался, как показано ниже, но он не устанавливает значение данных пустым

 <td onfocus="this.value=''"><?php echo $row['payment_company']; ?></td>

Итак, это то, что я пытаюсь сделать эквивалентом:-

 <input type='text' id='name' value = 'Hello' onfocus = 'this.value = ""' />

Обновление:
Потому что это не работает в моем коде здесь, сгенерированном HTML с помощью инструментов разработчика браузера:

 <td onclick="this.textContent='';" class="tabledit-view-mode">
  <span class="tabledit-span">onclick textContent</span>
  <input 
    class="tabledit-input form-control input-sm" 
    type="text" 
    name="payment_method" 
    value="onclick textContent" 
    style="display: none;" 
    disabled=""
  >
</td>

Комментарии:

1. focus Событие не срабатывает по td элементам. Используйте click вместо этого.

2. @RoryMcCrossan Я бы сказал, что предоставление элемента tabindex заставит событие focus работать с указанным элементом, см. Документы для tabindex : html.spec.whatwg.org/multipage/interaction.html#attr-tabindex При перекрестной ссылке на документы для события focus w3c.github.io/uievents/#event-type-focus однако явно не упоминается, что фокусируемый элемент будет вызывать событие фокусировки.

3. Хороший момент, однако добавление a tabindex по причинам, отличным от обеспечения доступности, не является хорошей практикой.

Ответ №1:

У A td нет value — вы могли бы использовать innerHTML или textContent вместо этого. Кроме focus того, событие срабатывает, если вы даете элементу a tabindex . В качестве альтернативы вы можете использовать click событие.

Рабочий пример:

 <table>
  <td onfocus="this.innerHTML='';" tabindex="0">onfocus innerHTML / </td>
  <td onfocus="this.textContent='';" tabindex="0">onfocus textContent</td>
  <td onclick="this.innerHTML='';">onclick innerHTML / </td>
  <td onclick="this.textContent='';">onclick textContent / </td>
</table>

Чтобы использовать jQuery-Tabledit, вам нужно выбрать сгенерированный дочерний ввод и очистить его значение. Вы могли бы сделать это встроенным:

 <td onfocus="this.querySelector('input').value = '';" tabindex="0">inline</td>

или с помощью вызова функции:

 <td onfocus="emptyCell(this);" tabindex="0">function</td>
 
 function emptyCell(scope) {
  $(scope).find('input').val('');
}

Рабочий пример:

 $('#test-table').Tabledit({
    editButton: false,
    hideIdentifier: true,
    columns: {
        identifier: [0, 'id'],
        editable: [[1, 'onfocus1'], [2, 'onfocus2'], [3, 'onclick1'], [4, 'onclick2']]
    }
});

function emptyCell(scope) {
  $(scope).find('input').val('');
} 
 .tabledit-remove-button {
  display: none;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Creating-A-Live-Editable-Table-with-jQuery-Tabledit/jquery.tabledit.js"></script>

<table id="test-table">
  <thead>
    <tr>
      <th>#</th>
      <th>onfocus1</th>
      <th>onfocus2</th>
      <th>onclick1</th>
      <th>onclick2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>row 1</td>
      <td onfocus="this.querySelector('input').value = '';" tabindex="0">inline</td>
      <td onfocus="emptyCell(this);" tabindex="0">function</td>
      <td onclick="this.querySelector('input').value = '';">inline</td>
      <td onclick="emptyCell(this);">function</td>
    </tr>
  </tbody>
</table>

Комментарии:

1. 3-й вариант onclick очищает данные в td, но удаляет возможность добавления новой информации, т. е. не может вводить новые данные в ячейку. Параметры onfocus не очищают данные, хотя я вижу, что они очищают их в вашем фрагменте.

2. К сожалению, параметры onclick очищают ячейку, но удаляют возможность создавать новый текст для обновления, т. е. ячейка больше не доступна для редактирования.

3. Теперь я удалил решение onclick. У вас есть такой html-фрагмент td , который отображается в браузере (см. в инструментах разработки)?

4. <td onfocus=»this.textContent=»;» tabindex=»0″ class=»tabledit-edit-mode»><span class=»tabledit-span» style=»display: none;»>текстового содержимого</span><input class=»tabledit-input form-control input-sm» type=»text» name=»payment_method» value=»textContent» style=»»></td>

5. И функция onclick является/являлся следующим образом:- <td onclick=»this.textContent=’Please’;» class=»tabledit-view-mode»><span class=»tabledit-span»>onclick функции текстового содержимого</span><input class=»tabledit-input form-control input-sm» type=»text» name=»payment_method» value=»onclick textContent» style=»display: none;» disabled=»»></td>

Ответ №2:

Ты можешь это сделать. Это должно помочь В вашем html

 <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <table>
      <tr>
        <td onclick="erase()">we</td>
      </tr>
    </table>
    <script src="script.js"></script>
  </body>
</html>

В вашем script.js

 function erase() {
  event.target.innerHTML = ""
}
Метки: