主页 / 问题 / 1496876
Accepted
Nikita
Asked:2023-02-16 20:19:43 +0000 UTC2023-02-16 20:19:43 +0000 UTC

如何获取隐藏元素的值？

  • 772

帮我看看，有下面创建表格的js代码

tableData.forEach(element => {
   let row = '<tr class="markup-table__row">'
        + ' <td class="markup-table__cell">'
        + '     <div style="cursor:pointer" class="markup-table__cell-text" onclick="getDetailsOperator()">'
        + element.operatorName
        + '     <input type="hidden" name="idOperator" value="' + element.id + '"/>'
        + '     </div>'
        + ' </td>'
})

问题是如何正确编写一个函数getDetailsOperator()来获取带有 的隐藏元素的值（例如，通过警报或控制台显示它）name="idOperator"，在这种情况下您不能添加 id 属性。

我很少使用 JS，没有父对象和子对象的经验，有人可以帮忙吗？

javascript

2 个回答

  1. Best Answer

    获取名称为“idOperator”的隐藏元素的值（例如，通过警报或控制台显示）

    我会建议这个选项getDetailsOperator()......

    document.querySelector('#test').addEventListener('click', e => {
  const ot = e.target.closest('tr')
  if (!ot) return
  const val = ot.querySelector('[name="idOperator"]')?.value ?? '<тут нет такого поля>'
  console.log(val)
})

function getDetailsOperator() {
  return [...document.querySelectorAll('[name="idOperator"]')].map(o => o.value)
}
console.log(getDetailsOperator().join(', '))
    <table id='test'>
  <tr class="markup-table__row">
    <td class="markup-table__cell">
      <div style="cursor:pointer" class="markup-table__cell-text" onclick="getDetailsOperator()">
        operatorName1
        <input type="hidden" name="idOperator" value="element.id1" />
      </div>
    </td>
  </tr>
  <tr class="markup-table__row">
    <td class="markup-table__cell">
      <div style="cursor:pointer" class="markup-table__cell-text" onclick="getDetailsOperator()">
        operatorName2
        <input type="hidden" name="idOperator" value="element.id2" />
      </div>
    </td>
  </tr>
</table>

    • 2

  2. 但是你怎么能只显示某些，比如说，只显示那些被点击的？

    for (const input of document.querySelectorAll(`[name="idOperator"]`)) {
   input.addEventListener("click", function (){
      console.log(this.value)
   })
}

    当您单击一个字段时，它会显示其结果。或者您是否只需要那些完全改变/点击它们的人？

    • 0

相关问题