Доступ к ячейке таблицы по кнопке.

[savsoft]

Сильно не пинайте, я делаю первые шаги в javascript.

На php я формирую таблицу с несколькими полями. Одно из полей необходимо менять не перезагружая страницу. Если просто отдельное значение, то я могу это сделать через ajax-запрос. А вот в случае с таблицей не знаю как подступиться. На php я даю имя поля-массив с индексом уникальный код, а как быть в случае с javascript? Использовать массив или давать полю id="idN", где N уникальный код, а кнопке давать id="bidN"? Если так, то как определить нажатую кнопку и соответствующее ей поле?

Спасибо!

[savsoft]

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

Таблицу я сам формирую на php, но в зависимости от условий, заданных пользователем, сортировка и содержимое разные. В каждой строке есть колонка с уникальным кодом, несколько колонок с инфой, колонка с полем textarea и рядом колонка с кнопкой "Сохранить".

Вопрос как мне вывести колонку с полем textarea и кнопку, чтобы легко и просто идентифицировать, какая кнопка была нажата, а точнее прочитать содержимое поля textarea и уникальный код строки?

[savsoft]

$('td button').on('click', function (e) {
    var $button = $(this),
        buttonId = $button.attr('id');
    var $tr = $button.closest('tr'),
        trId = $tr.attr('id');
    var $textarea = $tr.find('textarea'),
        textareaValue = $textarea.val();
});

А как должна выглядеть строка таблицы?

У меня сейчас строка для записи с уникальным кодом 16 выглядит так

<tr id="16">
<td>Awesome</td>
<td>S</td>
<td>31-01-2019</td>
<td><a class="btn btn-primary" href="ht.php?id=107&type=1">HT</a></td>
<td><textarea id="t16" rows="3" cols="64"></textarea></td>
<td><button id="b16"><img src="images/save.png"></button></td>
</tr>

[savsoft]

В конце концов сделал так и частично заработало

<script>
		$(document).ready(function(){

			// code to read selected table row cell data (values).
			$("#myTable").on('click','.btnSelect',function(){
				 // get the current row
				 var currentRow=$(this).closest("tr"); 
				 
				 //var col1=currentRow.find("td:eq(0)").text(); // get current row 1st TD value
				 var colT=currentRow.find("td:eq(7)").text(); // get current row 3rd TD
				 alert(colT);
			});
		});	
</script>

Этот скрипт выдает значение, которое было при формировании таблицы, а мне нужно введенное или измененное значение. Подскажите, куда копать?

[savsoft]

Какое видите значение в восьмой ячейке такое и получаете, других значений там нет.

Разобрался, если я использую .text(), то вижу значение на момент создания таблицы, или пустое или значение, а чтобы увидеть новое введенное или измененное значение нужен .val().

А можно как-то прочитать id, например 5 ячейки текущей строки?

[рони]

А можно как-то прочитать id, например 5 ячейки текущей строки?

а подумать?

currentRow.find("td:eq(4)").attr('id');

[savsoft]

currentRow.find("td:eq(4)").attr('id');

Спасибо.

Я пока просто вывел колонку с Уникальным кодом и

style="display: none;"

. Пользователю не мешает, я могу прочитать уникальный код выбранной строки. Или в этом случае есть подводные камни?

[savsoft]

Частично разобрался. Получается что .text() хранит значение, которое было при выводе страницы, пока страницу не перезагрузить или значение можно явно изменить. А .val() хранит новое значение, введенное пользователем и при изменении .val(), .text() остается старым. В общем задачу ввода комментариев без перезагрузки страницы решил, раскраску строк таблицы тоже. Буду дальше постепенно разбираться с javascript.

Всем спасибо!

[j0hnik]

.text() - это jq метод, он не хранит ничего,... если не получает аргументов, то служит для получения родного свойства textContent .val() аналогично только для свойства value.

свойство textContent перезаписать value может у элемента textarea. но не наоборот. у элементов input такое не прокатит

[рони]

.val()

Метод позволяет получать и изменять значения элементов форм. Для элементов input это значение атрибута value; для списков выбора (select) – значение value выбранного элемента (в случае множественного выбора – массив значений); в случае с textarea, метод .val() будет работать непосредственно с содержимым тега textarea

text()

Возвращает или изменяет текстовое содержимое выбранных элементов страницы

val для value

text для textContent