如何将非input类型HTML标签的值传递给JavaScript函数

解决方案 #

data-*自定义属性完全适配你的需求，这是HTML官方提供的、专为任意HTML标签存储额外自定义数据的特性，没有使用限制。

实现步骤 #

• 第一步：给需要传递数据的HTML标签添加data-前缀的自定义属性，属性名可以自定义，比如你要存储标签标识就可以写data-tag-type="tag1"，存储业务ID就写data-id="td1"
• 第二步：绑定点击事件时获取当前触发事件的元素对象，直接通过元素的dataset属性读取自定义数据，也可以直接获取元素的标签名、内置属性等做判断

修正后的完整代码 #

HTML代码

<html>   
   <head>
      <title>JavaScript</title>
      <link href="style.css" rel="stylesheet">
   </head>
   <body>
      <table>
         <!-- 给tr或者td加自定义data属性，这里示例给td加，第一个td的tag-type设为tag1 -->
         <tr>
            <td data-id="td1" id="td1" data-tag-type="tag1">
            </td>
            <td id="td2" data-tag-type="tag2">
            </td>
            <td id="td3" data-tag-type="tag3">
            </td>
         </tr>
         <tr>
            <td id="td4" data-tag-type="tag1">
            </td>
            <td id="td5" data-tag-type="tag2">
            </td>
            <td id="td6" data-tag-type="tag3">
            </td>
         </tr>
         <tr>
            <td id="td7" data-tag-type="tag1">
            </td>
            <td id="td8" data-tag-type="tag2">
            </td>
            <td id="td9" data-tag-type="tag3">
            </td>
         </tr>
      </table>
      <script>
      // 统一给所有td绑定点击事件，不需要逐个加onclick
      document.querySelectorAll('td').forEach(td => {
        td.addEventListener('click', function() {
          // this就是当前点击的td元素
          // 拿自定义data属性的值
          const tagType = this.dataset.tagType
          const id = this.dataset.id
          // 拿标签名，返回大写的TD/TR等
          const tagName = this.tagName.toLowerCase()

          // 按你的需求做判断
          if (tagType === 'tag1') {
            console.log('触发tag1对应的功能，当前点击的td id是', id)
            // 这里写tag1对应的逻辑
          } else {
            console.log('当前点击的标签类型是', tagType)
          }
        })
      })
      </script>    
   </body>
</html>

CSS代码（和你原有代码一致，无需修改）

* {
    margin: 0px;
    padding: 0px;
}
table {
    width: 200px;
    height: 200px;
    border:1px solid black;

}
table td {
    border:1px solid black;
}

关键说明 #

• 所有data-xxx格式的自定义属性，都可以通过元素的dataset.xxx直接读取，属性名会自动从短横线命名转成驼峰命名，比如data-tag-type对应dataset.tagType
• 如果你需要给tr绑定点击事件，只需要把querySelectorAll('td')改成querySelectorAll('tr')即可，数据读取逻辑完全一致
• 除了自定义data属性，你也可以直接读取元素的id、innerText等内置属性做判断，用法和普通DOM操作完全相同

内容的提问来源于stack exchange，提问作者IR Fifa