浏览器中的javascript和td元素事件属性
javascript and td element events properties in browsers
我不能使用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浏览器中运行。
您必须将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
您正在执行一个没有参数的函数。所以"e"将是未定义的。
<tr><td><span onclick='foo(this)'>XYZ</span></td><td>2</td></tr>
现在您可以使用e来表示Dom元素。
此链接可能有助于您:什么';s";这个";在javascript onclick中?
干杯,Valentin
我在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>
希望它能帮助
相关文章:
- 元素事件处理程序到EXT.js面板中
- 浏览器中的javascript和td元素事件属性
- 主干清理元素事件
- 影响类的所有成员而不是一个元素事件的插件正在发生
- AngularJS - ngRepeat.在 ng 重复重新渲染后,需要将焦点集中在相同的元素事件上
- 在jQuery中,如何触发mootools中添加的元素事件
- 允许 Raphael/SVG 元素事件通过顶部分层的 HTML 触发
- CanJS未来元素事件绑定
- 重新选择所选选项时,Javascript/jQuery选择元素事件
- 类变量在元素事件中不可见
- 修改元素'事件函数的参数
- 如何过滤掉事件处理程序中的子元素事件
- 要求Javascript关注多个元素事件的模式
- 允许先触发其他绑定元素事件
- Firefox扩展不能覆盖元素事件
- 如何获取"mouseup"之后的元素事件完成
- 用于文档防止元素事件的Onclick事件
- 如何获取触发“onclick”的元素事件
- 向由子元素事件触发的表单元格添加类/从中删除类
- JavaScript在元素加载后立即绑定元素事件