使用Javascript检测多个表的点击

时间:2014-08-27 14:49:39

标签: javascript

我开发了一些代码,用于检测用户何时点击表格中的单元格,然后使用为该单元格设置的bgColor。

我有大部分我想要实现的工作,我坚持如何让它检测多个表中的点击,而不仅仅是一个。我需要使用多个表,但是我无法使用所有表,只有colorchartX表。因此,此页面上的其他表格在单击其单元格时不应执行任何操作。

所以在下面的代码中,我有colorchart1正常工作,我如何获得colorchart2来检测何时单击其中一个单元格,然后为该单元格提供bgColor?

function getVal(e) {
    var targ;
    if (!e) var e = window.event;
    if (e.target) targ = e.target;
    else if (e.srcElement) targ = e.srcElement;
    if (targ.nodeType == 3) // defeat Safari bug
        targ = targ.parentNode;

    var colorSelected = targ.attributes.bgcolor.value;
    alert(colorSelected);
}

onload = function() {
    var t = document.getElementById("colorchart1").getElementsByTagName("td");
    for ( var i = 0; i < t.length; i++ )
        t[i].onclick = getVal;
}


<table id="colorchart1">
<tr>
<td bgColor="#F8E0E0"></td><td bgColor="#F8ECE0"></td><td bgColor="#F7F8E0"></td><td   bgColor="#ECF8E0"></td>
<td bgColor="#E0F8E0"></td><td bgColor="#E0F8EC"></td><td bgColor="#E0F8F7"></td><td bgColor="#E0ECF8"></td><td bgColor="#E0E0F8"></td>
</tr><tr>
<td bgColor="#F5A9A9"></td><td bgColor="#F5D0A9"></td><td bgColor="#F2F5A9"></td><td bgColor="#D0F5A9"></td>
<td bgColor="#A9F5A9"></td><td bgColor="#A9F5D0"></td><td bgColor="#A9F5F2"></td><td bgColor="#A9D0F5"></td><td bgColor="#A9A9F5"></td>
</tr>
<table>

<table id="colorchart2">
<tr>
<td bgColor="#F8E0E0"></td><td bgColor="#F8ECE0"></td><td bgColor="#F7F8E0"></td><td   bgColor="#ECF8E0"></td>
<td bgColor="#E0F8E0"></td><td bgColor="#E0F8EC"></td><td bgColor="#E0F8F7"></td><td bgColor="#E0ECF8"></td><td bgColor="#E0E0F8"></td>
</tr><tr>
<td bgColor="#F5A9A9"></td><td bgColor="#F5D0A9"></td><td bgColor="#F2F5A9"></td><td bgColor="#D0F5A9"></td>
<td bgColor="#A9F5A9"></td><td bgColor="#A9F5D0"></td><td bgColor="#A9F5F2"></td><td bgColor="#A9D0F5"></td><td bgColor="#A9A9F5"></td>
</tr>
<table>

1 个答案:

答案 0 :(得分:1)

var ids = ['colorchart1', 'colorchart2'];
for(var j = 0; j < ids.length; j++) {
var t = document.getElementById(ids[j]).getElementsByTagName("td");
for ( var i = 0; i < t.length; i++ )
    t[i].onclick = getVal; 
}

或 - 使用jQuery并为所有表格提供一个&#34; colorchart&#34;然后使用$(&#39; .colorchart&#39;)选择器。