Как изменять текст внутри ячейки при нажатии на нее?

Question

[Валерий Сиволапенко]

Помогите, пожалуста, осуществить следующий функционал:
При нажатии в поле таблицы менять текст внутри <td>.
По дефолту некоторые ячейски выгружаются пустые, некоторые со значением. При нажатии необходимо менять текст1, текст2, текст3, текст4.

Comments

[sergski]

Браузер не редактор, поэтому тут только эмулировать редактирование: при клике по полю таблицы вызывать input с фокусом на него и при вводе в него данных брать их и вставлять в поле таблицы. Также вводимые данные должны, наверно, сохранятся в бд, чтобы не потерять. Как то так)

Answer 1

[0xD34F]

О каких текстах идёт речь:

const text = [
  'hello, world!!',
  'fuck the world',
  'fuck everything',
];

Можно хранить индекс текущего текста для каждой из ячеек:

$('table').on('click', 'td', function() {
  const $this = $(this);
  const index = ($this.data('index') + 1) % text.length;
  $this.text(text[index]).data('index', index);
}).find('td').data('index', -1);

Или, вычислять его непосредственно при клике:

document.querySelector('table').addEventListener('click', ({ target: t }) => {
  if (t = t.closest('td')) {
    t.textContent = text[-~text.indexOf(t.textContent) % text.length];
  }
});

Comments

[Валерий Сиволапенко]

Спасибо. Только мне нужно менять содержимое ячейки. На три разных текста.

[0xD34F]

Валерий Сиволапенко, и в чём проблема?

[Валерий Сиволапенко]

Ну, видимо, проблема в руках))
Что-то вроде такого сделал, но не меняет и не понятно, как задать несколько текстов.
Я, в джаваскрипте нуб (Стардантная отмазка, наверняка))
$('#t').on('click', 'td', function() {
/*alert($(this).text().replace('', 'ok')); Так меняет*/
$(this).text().replace('', 'ok');
});

[0xD34F]

Если методу text было передано значение (.text('какой-то текст')), то он его устанавливает, а если нет (.text()) - возвращает текущее. Несколько ячеек - цепляйте к ячейке текущий индекс с помощью метода data. Ответ обновил.

[Валерий Сиволапенко]

Не знаю верно или нет. Вроде сделал, работает.
0xD34F, Спасибо!
jsfiddle.net/CtC9E/5