如何知道在表格中点击的元素？ [英] How to know element clicked within a table?

问题描述

我试着在HTML表格中的TR中获取单元。如果我点击TR内的选择输入， CurrentTarget 字段返回TR，并且 OriginalTarget 返回SELECT 。

这是我的HTML：

 < table id = 0class =tableEdit> 
< thead> 
< tr> 
< th name =id>< / th> 
< th name =name>描述Registro< / th> 
< th name =select> Fecha< / th> 
< / tr> 
< / thead> 
< tbody> 
< tr> 
< td> 1651< / td> 
< td>名称< / td> 
< td> 
< select name =selectName> 
< option value =1> 1< / option> 
< option value =2> 2< / option> 
< / select> 
< / td> 
< / tr> 
< / tbody> 
< / table> 
  

这是我的代码：

 // trb是每行的TR元素
 $（trb）.click（function（elem）{
 if（elem.currentTarget&& elem。 currentTarget.tagName.toLowerCase（）===tr&&！isInput（elem.originalTarget））{
 if（editableRow）{
 var rowTrigger = editableRow.find（button） .get（）; 
 $ .editRow（rowTrigger，$。tableEditor.vault.getTableID（$（＃+ id）））; 
} 
}）; 
  

这段代码在我的网络浏览器上工作正常，但不在移动设备上，因为OriginalTarget返回未定义。有没有什么办法可以在移动网络浏览器上获得原始目标？ 你还没有真正说过 trb 是，但它听起来像它可能是表中的一组 tr 元素。

你要找的是 elem.target 。这是被点击的最顶层的元素，是发起的事件。 （FWIW，我不会调用传递给事件处理函数 elem 的参数，它是一个事件，而不是元素。）

例如，如果您有：

 < table> 
< tbody> 
< tr> 
< td>< span>< strong>点击我< / strong>< / span>< / td> 
< / tr> 
< / tbody> 
< / table> 
  

...和此：

<$ p点击（功能（e）{
console.log（e.target.tagName）;
}）; $ p> $（tr


...然后点击文字点击我，您会看到

 STRONG 

...在控制台中。

---

边注：使用 最接近 ，如果你想知道单元或行被点击了什么，例如：

  var $ td = $（e.target）.closest（'td'）; 
  

I'm trying get the element clicked within a TR in a HTML table. If I click on the Select input inside a TR, CurrentTarget field returns "TR", and OriginalTarget returns "SELECT".

This is my HTML:

<table id="0" class="tableEdit">
    <thead>
        <tr>
            <th name="id"></th>
            <th name="name">Descripción Registro</th>
            <th name="select">Fecha</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1651</td>
            <td>Name</td>
            <td>
                <select name="selectName">
                    <option value="1">1</option>
                    <option value="2">2</option>
                </select>
            </td>
        </tr>
    </tbody>
</table>

And this is my code:

            //trb is each TR element of the line
    $(trb).click(function(elem){
        if (elem.currentTarget && elem.currentTarget.tagName.toLowerCase() === "tr" && !isInput(elem.originalTarget)){
            if (editableRow){
                var rowTrigger = editableRow.find("button").get();
                $.editRow(rowTrigger,$.tableEditor.vault.getTableID($("#" + id)));
            }
    });

This code is working fine on my web browser, but it doesn't on mobile devices, because OriginalTarget returns undefined. Is there any way to get the original target on a mobile web browser?

解决方案

You haven't actually said what trb is but it sounds like it might be a set of the tr elements in your table.

What you're looking for is elem.target. That's the topmost element that was clicked, the one that initiated the event. (FWIW, I wouldn't call the argument passed to the event handler elem, it's an event, not an element.)

For instance, if you have:

<table>
<tbody>
<tr>
<td><span><strong>Click me</strong></span></td>
</tr>
</tbody>
</table>

...and this:

$("tr").click(function(e) {
    console.log(e.target.tagName);
});

...and you click the text "click me," you'll see

STRONG

...in the console.

---

Side note: It's handy to use closest with that if you want to know what cell or row was clicked, e.g.:

var $td = $(e.target).closest('td');

这篇关于如何知道在表格中点击的元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！