如何将html表格单元格值传递给javascript变量？
[英]How to pass html table cell value to javascript variable?
问题描述
I have no experience with javascripting and need a solution for my html page with a table generated automatically by a shell script.
我没有使用 javascript 的经验，需要一个解决方案来解决我的 html 页面，其中包含一个由 shell 脚本自动生成的表格。 Script outputs the HTML code below.脚本输出下面的 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>
I need a javascript with onclick when the user clicks the first entry in the table row (eg 1, 2 or 3), javascript gets the value from the page named plstable.html, set a variable value (like var x = 1) and run a command in the shell like "mpc play + x" to play the first entry.当用户单击表行中的第一个条目（例如 1、2 或 3）时，我需要一个带有 onclick 的 javascript，javascript 从名为 plstable.html 的页面获取值，设置一个变量值（如 var x = 1）和在 shell 中运行像“mpc play + x”这样的命令来播放第一个条目。 Javascript should be a seperate file because the shellscript generating the html table becomes complex in the case of adding java code to shell script. Javascript 应该是一个单独的文件，因为在将 java 代码添加到 shell 脚本的情况下，生成 html 表的 shellscript 变得复杂。
2 个解决方案
解决方案1
0 已采纳 2019-06-26 17:51:04
This code这段代码
- Adds a click (event) listener to every first
<td>of every<tr>增加了一个单击（事件）监听到的每个第一<td>的每一个<tr> - On click the text is parsed to int (base10), and the number is passed to the handler function (
getNumber(val))单击时，文本被解析为 int (base10)，并将数字传递给处理函数 ( getNumber(val)) - The handler function prints the value read from the
<td>to the console处理函数将从<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>
解决方案2
0 2019-06-28 05:32:55
ES6 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.