javascript - 使用 Javascript 检测多个表的点击

Question

我开发了代码，可以检测用户何时单击表格中的单元格，然后使用为该单元格设置的 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>

Answer 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 并为所有表提供一个“colorchart”类，然后使用 $('.colorchart') 选择器。