Как выбрать одну строку таблицы?

Question

Я пытаюсь выбрать любую отдельную строку в таблице, но вместо этого, если я щелкаю в любой из строк, она выбирается так, как будто я щелкнул по всей таблице.

<tbody>
          <tr v-for="info in infos" :key="info.id" id="tr-infos" @click="onRowSelect">
            <td width="310" height="30" class="td-info">
              <span class="info-span">{{info.noun}}</span>
            </td>
            <td width="310" height="30" class="td-info">
              <span class="info-span">{{info.department}}</span>
            </td>
            <td width="310" height="30" class="td-info">
              <span class="info-span">{{info.place}}</span>
            </td>
            <td width="310" height="30" class="td-info">
              <span class="info-span">{{info.role}}</span>
            </td>
          </tr>
        </tbody>

Я также пытался это. но возвращает undefined.

methods: {
    onRowSelect(x) {
      console.log(x.rowIndex);
    }
  }

Я действительно не знаю, что делать в этом пункте. Кто-нибудь может помочь?

Answer 1

Когда вы щелкаете по строке, event.target это фактически самый внутренний элемент, по которому щелкнули. Если у вас есть элемент <span> внутри каждого <td>, который находится в строке, элемент <span>, скорее всего, будет event.target при нажатии на эту строку. Родитель элемента <span> является элементом <td>, а .parentNode из <td> - это <tr>, который вы хотите.

Итак, один из способов получить <tr>, это подниматься по иерархии DOM через .parentNode, пока element.tagName не станет TR:

function rowSelectHandler(event)
{
  let element = event.target;
  if(element.tagName === "TABLE")
  {
    console.log("You click on the table, without clicking a row.");
  }
  else
  {
    while(element.tagName !== "TR")
    {
     element = element.parentNode;
    }
    let row = element;
    console.log(row);
  }
}

let table = [... document.getElementsByTagName("TABLE")][0];
table.addEventListener("click", rowSelectHandler);

table
{
  background-color: blue;
  border: 3px solid black;
}
td
{
  background-color: red;
  border: 1px solid black;
}
span
{
  background-color: yellow;
}

<p>In the table below, tr elements are blue, td elements are red, and span elements are yellow.</p>
<p>Click anywhere within the row to console.log its TR element:</p>
<table>
  <tbody>
    <tr v-for="info in infos" :key="info.id" id="tr-infos" @click="onRowSelect">
      <td width="310" height="30" class="td-info">
        <span class="info-span">{{info.noun}}</span>
      </td>
      <td width="310" height="30" class="td-info">
        <span class="info-span">{{info.department}}</span>
      </td>
      <td width="310" height="30" class="td-info">
        <span class="info-span">{{info.place}}</span>
      </td>
      <td width="310" height="30" class="td-info">
        <span class="info-span">{{info.role}}</span>
      </td>
    </tr>
  </tbody>
</table>

Я намеренно не установил стиль таблицы на border-collapse: collapse;, поэтому вы можете видеть, как будет "щелкать границу между <td> элементами" не приводит к щелчку строки. Поэтому в элементе CSS используйте border-collapse: collapse; для элементов таблицы, чтобы избежать возможности щелкать таблицу, которая находится за строкой, когда происходит щелчок между двумя ячейками.