浏览器中的javascript和td元素事件属性

Question

我不能使用JQuery
尝试在td元素上设置一个事件列表，这样，如果用户单击它，它将读取td中的文本，并在相同的表行中查找重复项。例如ABC是重复的。

<tr><td onclick='foo()'>ABC</td><td>7</td></tr>
<tr><td onclick='foo()'>DEF</td><td>8</td></tr>
<tr><td onclick='foo()'>HIJ</td><td>9</td></tr>
<tr><td onclick='foo()'>ABC</td><td>10</td></tr>

有人说我不能在td标签上使用onclick方法，所以我这样做了。

<tr><td><span onclick='foo()'>XYZ</span></td><td>2</td></tr>

事件功能如下：

function foo(e) {  
          alert('hi');
          alert(e.target);
//        alert(window.Event.target.innerHTML);          
//        alert(event.target.text);  
//        alert(event.target.tagName);  
//        alert(event.target.textContent);                
//        alert(event.target.parentElement.tagName);
//        alert(event.target.innerHTML);                

我注意到的第一件事是Firefox，IE，甚至不启动事件代码方法和属性。他们一直跑到高度戒备。但是其余的代码不会被执行。

另一方面，Chrome能够运行事件代码。我可以使用alert（event.target.innerHtml）成功地获取innerHtml；

如何使其在Firefox和IE浏览器中运行。

Answer 1

您必须将event作为参数传递给foo函数：

    <tr><td onclick='foo(event)'>ABC</td><td>7</td></tr>
    <tr><td onclick='foo(event)'>DEF</td><td>8</td></tr>
    <tr><td onclick='foo(event)'>HIJ</td><td>9</td></tr>
    <tr><td onclick='foo(event)'>ABC</td><td>10</td></tr>

然后你就可以打电话了。但你也必须检查在IE浏览器中可能有不同名称的目标：

var target = e.target || e.srcElement;

这是一个工作Fiddle

Answer 2

您正在执行一个没有参数的函数。所以"e"将是未定义的。

<tr><td><span onclick='foo(this)'>XYZ</span></td><td>2</td></tr>

现在您可以使用e来表示Dom元素。

此链接可能有助于您：什么'；s"；这个"；在javascript onclick中？

干杯，Valentin

Answer 3

我在Firefox、Explorer和Chrome中测试了这一点，并按预期工作：

<table>
<tr><td onclick='foo(this)'>ABC</td><td>7</td></tr>
<tr><td onclick='foo(this)'>DEF</td><td>8</td></tr>
<tr><td onclick='foo(this)'>HIJ</td><td>9</td></tr>
<tr><td onclick='foo(this)'>ABC</td><td>10</td></tr>
</table>
<script>
function foo(element){
    var myContent = element.innerHTML;
    var trElementsInTable = element.parentElement.parentElement.children;
    var numberOfOcurrences = 0;
    for (i=0;i<trElementsInTable.length;i++){
        if (trElementsInTable[i].children[0].innerHTML == myContent) numberOfOcurrences++
    }
    if (numberOfOcurrences > 1){
        alert("I've found " + numberOfOcurrences + " ocurrences of content " + myContent);
    }
    else{
        alert("Ok I am not repeated");
    }
}
</script>

希望它能帮助