Как передать значение ячейки таблицы HTML в переменную JavaScript? - PullRequest
Новая
       28

Как передать значение ячейки таблицы HTML в переменную JavaScript?

0 голосов
/ 26 июня 2019

У меня нет опыта работы с javascripting, и мне нужно решение для моей html-страницы с таблицей, автоматически генерируемой сценарием оболочки.Скрипт выводит код HTML ниже. 

cat plstable.html
<html><head></head><body><table>
<tr><td>1</td><td> The Fratellis - Chelsea Dagger </td></tr>
<tr><td>2</td><td> Connect Northants: Eternal / Bebe Winans - I Wanna Be The Only One</td></tr>
<tr><td>3</td><td> Virgin_UK_128</td></tr>
</table></body></html>

Мне нужен javascript с onclick, когда пользователь щелкает первую запись в строке таблицы (например, 1, 2 или 3), javascript получает значение со страницы с именемplstable.html, установите значение переменной (например, var x = 1) и выполните команду в оболочке, например «mpc play + x», чтобы воспроизвести первую запись.Javascript должен быть отдельным файлом, потому что сценарий оболочки, генерирующий HTML-таблицу, становится сложным в случае добавления кода Java в сценарий оболочки.

Ответы [ 2 ]

0 голосов
/ 28 июня 2019

ES6 

[...document.querySelectorAll("table tr td:first-child")]
  .forEach((td) => td.addEventListener("click",getNumber))

function getNumber() {
  console.log(+this.textContent)
}
td:first-child {
  cursor: pointer;
  font-weight: 700;
}
<table>
  <tr>
    <td>1</td>
    <td> The Fratellis - Chelsea Dagger </td>
  </tr>
  <tr>
    <td>2</td>
    <td> Connect Northants: Eternal / Bebe Winans - I Wanna Be The Only One</td>
  </tr>
  <tr>
    <td>3</td>
    <td> Virgin_UK_128</td>
  </tr>
</table>
0 голосов
/ 26 июня 2019

Этот код

  1. Добавляет прослушиватель кликов (событий) к каждому первому <td> каждого <tr>
  2. При нажатии текст анализируется в int (base10), а число передается в функцию-обработчик (getNumber(val))
  3. Функция-обработчик печатает значение, считанное с <td>, на консоль 

// "grabbing" each row
const rows = document.getElementsByTagName('tr')

// iterating over each row
for (let i = 0, length = rows.length; i < length; i++) {

  // grabbing the first child element in each row (so no text
  // or other type of nodes - only elements)
  // then adding a click event listener with a callback function
  rows[i].firstElementChild.addEventListener('click', function(e) {

    // calling the "designed" function in the event listener
    // callback
    getNumber(parseInt(this.textContent, 10))
  })
}

// the handling function
function getNumber(val) {
  console.log(val)
}
td:first-child {
  cursor: pointer;
  font-weight: 700;
}
<table>
  <tr>
    <td>1</td>
    <td> The Fratellis - Chelsea Dagger </td>
  </tr>
  <tr>
    <td>2</td>
    <td> Connect Northants: Eternal / Bebe Winans - I Wanna Be The Only One</td>
  </tr>
  <tr>
    <td>3</td>
    <td> Virgin_UK_128</td>
  </tr>
</table>
...