1

xtar

Имеется 75 ячеек в таблице. При клике на любую из них мне надо достать значение которое находится в textarea этой ячейки.
id ячеек пронумеровано от 0 до 75, знаний в js нет, и не знаю как при клике на div ячейки доставать значение её textarea

1
  • Не знаю как логика эта реализуется, нужно onclick или что-то привязывать в тэги или вообще через css реализовывать, не понимаю
    – Timka
    12 июл 2019 в 9:42

2 ответа 2

1

Можно так используя библиотеку 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>
1

Решение на чистом 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);
3
  • У меня здесь 5 разныы table, не знаешь, как реализовать? Что-то не получается у меня, все что ты написал скопировал, но в js не шарю
    – Timka
    12 июл 2019 в 11:11
  • Код скопировал, но что-то не выводит мне textarea, не знаю почему :(
    – Timka
    12 июл 2019 в 11:30
  • @Timka можно посмотреть где-то полный код страницы который получился? 12 июл 2019 в 12:06

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.