Question

我没有使用JavaScript的经验，因此需要针对HTML页面的解决方案，该解决方案具有由外壳脚本自动生成的表格。脚本输出以下HTML代码。

<fileUrl>
Range: bytes=3100-3200

当用户单击表行中的第一个条目（例如1、2或3）时，我需要一个带有onclick的javascript，javascript从名为plstable.html的页面获取值，设置一个变量值（例如var x = 1）并在外壳程序中运行“ mpc play + x”命令来播放第一个条目。 Javascript应该是一个单独的文件，因为在将Java代码添加到Shell脚本的情况下，生成html表的shellscript变得很复杂。

Answer 1

此代码

向每个<td>的每个第一个<tr>添加一个点击（事件）监听器
单击文本会将其解析为int（base10），并将数字传递给处理函数（getNumber(val)）
处理程序函数将从<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>

Answer 2

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>

如何将html表单元格值传递给javascript变量？

2 个答案: