How to select a single row of a table?

Question

I am trying to select any single row in the table, but instead, if i click in any of the rows, it selects as if I clicked in the entire 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>

I also tried this. but returns undefined.

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

I really dont know what to do in this point. Anyone can help?

Answer 1

When you click on a row, the event.target it is actually the innermost element that was clicked on. If you have a <span> element inside of each <td> that's in the row, the <span> element will likely be the event.target upon clicking that row. The <span> element's parent is the <td> element and the .parentNode of the <td> is the <tr> you're wanting.

So, one way to get the <tr> , is to climb the DOM hierarchy via .parentNode until the element.tagName is 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>

I intentionally did not set table style to border-collapse: collapse; , so you can see how "clicking on the border between <td> elements" will not result in a row-click. Therefore, in your CSS, use border-collapse: collapse; on your table elements to avoid the possibility of clicking the table that's behind the row when the click happens between two cells.