时间戳

首页 > 解决方案 > 如何在以下 html 中获取并传递具有 class="name" 的行的字段？

javascript - 如何在以下 html 中获取并传递具有 class="name" 的行的字段？

问题描述

<tbody>
        <tr>
            <td>gibberish</td>
            <td class="name" hidden>200398</td>
            <td>iPhone X 64Gb Grey</td>
            <td>$999.00</td>
            <td>1</td>
            <td>
                <button onclick="fetchdata(parameter)">Fetch Details</button>
            </td>
        </tr>
</tbody>

在上面的 html 中，我希望函数 fetchdata(' parameter ') 包含 td 的文本内容，该文本内容具有名称类并且是隐藏的，作为参数。

或者

我需要一种方法来获取 td 的文本内容，该文本内容在我的 javascript 函数中具有名称类。IE

function fetchdata() {
  const name = document.somethingThatGivesMeName()
}

注意：我可能需要多行来获取名称，所以我不能直接做document.queryselector('.name')

对不起，这可能很简单，但我无法弄清楚。

标签： javascripthtmlcss

解决方案

单击按钮时，使用该方法在树中找到相对于按钮的第一行closest。然后从行中选择具有类的元素name并读取该元素的textContentor innerText。

const buttons = document.querySelectorAll('.js-fetch-details');

function fetchDetails(event) {
  const row = event.target.closest('tr');
  const name = row.querySelector('.name').textContent;
  console.log(name);
}

buttons.forEach(button => button.addEventListener('click', fetchDetails));
<table>
  <tbody>
    <tr>
      <td>gibberish</td>
      <td class="name" hidden>200398</td>
      <td>iPhone X 64Gb Grey</td>
      <td>$999.00</td>
      <td>1</td>
      <td>
        <button class="js-fetch-details">Fetch Details</button>
      </td>
    </tr>
  </tbody>
</table>

推荐阅读