[英]How to select a single row of a table?
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?
任何人都可以帮忙吗?
When you click on a row, the event.target
it is actually the innermost element that was clicked on.当你点击一行时,
event.target
它实际上是被点击的最里面的元素。 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.如果在行中的每个
<td>
内都有一个<span>
元素, event.target
在单击该行时<span>
元素很可能是event.target
。 The <span>
element's parent is the <td>
element and the .parentNode
of the <td>
is the <tr>
you're wanting.该
<span>
元素的父是<td>
元素和.parentNode
中的<td>
是<tr>
你想。
So, one way to get the <tr>
, is to climb the DOM hierarchy via .parentNode
until the element.tagName
is TR
:因此,获取
<tr>
一种方法是通过.parentNode
爬升 DOM 层次结构,直到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>
I intentionally did not set table style to border-collapse: collapse;
我故意没有将表格样式设置为
border-collapse: collapse;
, so you can see how "clicking on the border between <td>
elements" will not result in a row-click. ,因此您可以看到“单击
<td>
元素之间的边框”不会导致行单击。 Therefore, in your CSS, use border-collapse: collapse;
因此,在你的 CSS 中,使用
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.在您的表格元素上,以避免在两个单元格之间发生单击时单击行后面的表格的可能性。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.