Как получить текст из таблицы по нажатию на него?

Question

Есть таблица, в которую будут записаны много строк, в строке три столбца.

Как скопировать текст из определенной ячейки по нажатию на него?

Мой код:

h1 {
  font-size: 30px;
  color: #fff;
  text-transform: uppercase;
  font-weight: 300;
  text-align: center;
  margin-bottom: 15px;
}

table {
  width: 100%;
  table-layout: fixed;
}

.tbl-header {
  background-color: rgba(255, 255, 255, 0.3);
}

.tbl-content {
  height: auto;
  overflow-x: auto;
  margin-top: 0px;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

th {
  padding: 20px 15px;
  text-align: left;
  font-weight: 500;
  font-size: 12px;
  color: #fff;
  text-transform: uppercase;
}

td {
  padding: 15px;
  text-align: left;
  vertical-align: middle;
  font-weight: 300;
  font-size: 12px;
  color: #fff;
  border-bottom: solid 1px rgba(255, 255, 255, 0.1);
}


/* demo styles */

body {
  background: #25c481
  /* background: -webkit-linear-gradient(left, #25c481, #25b7c4);
  background: linear-gradient(to right, #25c481, #25b7c4); */
}

section {
  margin: 50px;
}

<section>
  <h1>йцу</h1>
  <div class="tbl-header">
    <table cellpadding="0" cellspacing="0" border="0">
      <thead>
        <tr>
          <th class="needToCopy">1</th>
          <th class="needToCopy">2</th>
          <th class="needToCopy">3</th>
        </tr>
      </thead>
    </table>
  </div>
  <div class="tbl-content">
    <table cellpadding="0" cellspacing="0" border="0">
      <tbody>
        <tr>
          <td>Текст1</td>
          <td>Текст2 </td>
          <td>Текст3</td>
        </tr>
      </tbody>
    </table>
  </div>
</section>

Answer 1

Что бы скопировать текст из ячейки по нажатию на нее, достаточно "повесить прослушку" на "контейнер" и далее проверять куда пришелся сам клик, в случае если он попал куда надо - выводить результат:

const handleClick = event => {
  const target = event.target
  const tag = target.tagName.toLowerCase()
  if (tag === "td") {
    console.log(target.textContent)
  }
}

document.querySelector(".tbl-content").addEventListener("click", handleClick)
// $(".tbl-content").on("click", handleClick)

Рабочий пример на основе Вашего кода:

const handleClick = event => {
  const target = event.target
  const tag = target.tagName.toLowerCase()
  if (tag === "td") {
    console.log(target.textContent)
  }
}

document.querySelector(".tbl-content").addEventListener("click", handleClick)

h1 {
  font-size: 30px;
  color: #fff;
  text-transform: uppercase;
  font-weight: 300;
  text-align: center;
  margin-bottom: 15px;
}

table {
  width: 100%;
  table-layout: fixed;
}

.tbl-header {
  background-color: rgba(255, 255, 255, 0.3);
}

.tbl-content {
  height: auto;
  overflow-x: auto;
  margin-top: 0px;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

th {
  padding: 20px 15px;
  text-align: left;
  font-weight: 500;
  font-size: 12px;
  color: #fff;
  text-transform: uppercase;
}

td {
  padding: 15px;
  text-align: left;
  vertical-align: middle;
  font-weight: 300;
  font-size: 12px;
  color: #fff;
  border-bottom: solid 1px rgba(255, 255, 255, 0.1);
}

body {
  background: #25c481
}

section {
  margin: 50px;
}

<section>
  <h1>Таблица</h1>
  <div class="tbl-header">
    <table cellpadding="0" cellspacing="0" border="0">
      <thead>
        <tr>
          <th class="needToCopy">1</th>
          <th class="needToCopy">2</th>
          <th class="needToCopy">3</th>
        </tr>
      </thead>
    </table>
  </div>
  <div class="tbl-content">
    <table cellpadding="0" cellspacing="0" border="0">
      <tbody>
        <tr>
          <td>Текст1</td>
          <td>Текст2</td>
          <td>Текст3</td>
        </tr>
      </tbody>
    </table>
  </div>
</section>

БЛОГ НА HUSL

Как получить текст из таблицы по нажатию на него?

Ответы (1 шт):