Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Доступ к ячейке таблицы по кнопке. (https://javascript.ru/forum/misc/76359-dostup-k-yachejjke-tablicy-po-knopke.html)

savsoft 03.01.2019 22:38

Доступ к ячейке таблицы по кнопке.
 
Сильно не пинайте, я делаю первые шаги в javascript.

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

Спасибо!

savsoft 04.01.2019 00:40

Цитата:

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

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

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

savsoft 04.01.2019 02:38

Цитата:

Сообщение от Rise (Сообщение 501295)
$('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 04.01.2019 11:38

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

<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 04.01.2019 14:28

Цитата:

Сообщение от Rise (Сообщение 501306)
Какое видите значение в восьмой ячейке такое и получаете, других значений там нет.

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

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

рони 04.01.2019 15:48

Цитата:

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

:blink:
а подумать?
currentRow.find("td:eq(4)").attr('id');

savsoft 04.01.2019 16:11

Цитата:

Сообщение от рони (Сообщение 501317)
:blink:
а подумать?
currentRow.find("td:eq(4)").attr('id');

Спасибо.

Я пока просто вывел колонку с Уникальным кодом и
style="display: none;"
. Пользователю не мешает, я могу прочитать уникальный код выбранной строки. Или в этом случае есть подводные камни?

savsoft 05.01.2019 00:09

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

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

j0hnik 05.01.2019 00:26

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

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

рони 05.01.2019 00:30

:-?
Цитата:

.val()

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

Цитата:

text()

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

text для textContent


Часовой пояс GMT +3, время: 03:30.