Имеется 75 ячеек в таблице. При клике на любую из них мне надо достать значение которое находится в textarea этой ячейки.
id ячеек пронумеровано от 0 до 75, знаний в js нет, и не знаю как при клике на div ячейки доставать значение её textarea
-
Не знаю как логика эта реализуется, нужно onclick или что-то привязывать в тэги или вообще через css реализовывать, не понимаю– Timka12 июл 2019 в 9:42
2 ответа
Можно так используя библиотеку Jquery
После нажатия в консоль выведет значение textarea.
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<table style="width:100%" id="table">
<tr>
<th id="1"><textarea class="text">text 1</textarea></th>
<th id="2"><textarea class="text">text 2</textarea></th>
<th id="3"><textarea class="text">text 3</textarea></th>
</tr>
<tr>
<th id="4"><textarea class="text">text 4</textarea></th>
<th id="5"><textarea class="text">text 5</textarea></th>
<th id="6"><textarea class="text">text 6</textarea></th>
</tr>
<tr>
<th id="7"><textarea class="text">text 7</textarea></th>
<th id="8"><textarea class="text">text 8</textarea></th>
<th id="9"><textarea class="text">text 9</textarea></th>
</tr>
</table>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('.text').click(function(event) {
console.log($(this).val());
});
});
</script>
Решение на чистом JS
Логика простая: есть ячейка таблицы с уникальным id, внутри каждой ячейки textarea с одиннаковым классом
Кликаем по ячейке, получаем её id, достаем из этого елемента дочерний textarea с уже известным именем и получаем значение
HTML:
<table style="width:100%" id="table">
<tr>
<th id="1"><textarea class="text">text 1</textarea></th>
<th id="2"><textarea class="text">text 2</textarea></th>
<th id="3"><textarea class="text">text 3</textarea></th>
</tr>
<tr>
<th id="4"><textarea class="text">text 4</textarea></th>
<th id="5"><textarea class="text">text 5</textarea></th>
<th id="6"><textarea class="text">text 6</textarea></th>
</tr>
<tr>
<th id="7"><textarea class="text">text 7</textarea></th>
<th id="8"><textarea class="text">text 8</textarea></th>
<th id="9"><textarea class="text">text 9</textarea></th>
</tr>
</table>
JS:
function findValue(e) {
var tableCell = e.target;
var textArea = tableCell.childNodes.getElementsByClassName('text');
console.log(textArea.value);
}
var tableCell = document.getElementById("table").childNodes.getElementsByTagName("th");
tableCell.addEventListener("click", findValue, false);
-
У меня здесь 5 разныы table, не знаешь, как реализовать? Что-то не получается у меня, все что ты написал скопировал, но в js не шарю– Timka12 июл 2019 в 11:11
-
-
@Timka можно посмотреть где-то полный код страницы который получился? 12 июл 2019 в 12:06