我对网络开发相当陌生，为了完成一项简单的任务，我正在处理一个项目，事实证明我想要执行的任务我必须使用Javascript但我对Javascript知之甚少弄清楚如何做我想做的事情，我在网上搜索但却找不到任何有用的东西：
How to know element clicked within a table?
How to access specific cell of clicked table row in javascript
...
这是我到目前为止编写的项目代码：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Menu</title>
<script>
function toggleTable() {
var lTable = document.getElementById("menulist");
lTable.style.display = (lTable.style.display == "table") ? "none" : "table";
}
</script>
</head>
<body>
<table width="300" border="1" id="menuitems">
<tbody>
<tr>
<td onclick="toggleTable()" id="cell1"> On-Menu</td>
<td onclick="toggleTable()" id="cell2"> On-Menu</td>
<td onclick="toggleTable()" id="cell3"> On-Menu</td>
<td onclick="toggleTable()" id="cell4"> On-Menu</td>
</tr>
<tr>
<td onclick="toggleTable()" id="cell5"> On-Menu</td>
<td onclick="toggleTable()" id="cell6"> On-Menu</td>
<td onclick="toggleTable()" id="cell7"> On-Menu</td>
<td onclick="toggleTable()" id="cell8"> On-Menu</td>
</tr>
<tr>
<td onclick="toggleTable()" id="cell9"> On-Menu</td>
<td onclick="toggleTable()" id="cell10"> On-Menu</td>
<td onclick="toggleTable()" id="cell11"> On-Menu</td>
<td onclick="toggleTable()" id="cell12"> On-Menu</td>
</tr>
</tbody>
</table>
<table width="300" border="1" id="menulist">
<tbody>
<tr>
<td id="cellorange"> Orange</td>
</tr>
<tr>
<td id="cellapple"> Apple</td>
</tr>
<tr>
<td id="cellbanana"> Banana</td>
</tr>
</tbody>
</table>
</body>
</html>
这里我有两组表，一组包含由'On-Menu'表示的空单元格，另一组包含选项列表。请看这里：https://jsfiddle.net/pz6tc3ae/
到目前为止，当点击每个表格单元时，该项目会触发一个javascript函数toggleTable（），该函数切换名为menulist的section表，包含Orange，Apple和Banana。
表1 = menuitems 表2 = menulist
我想知道的是：
用户可以单击表1中的任何单元格，这将触发toggleTable函数并切换（显示/隐藏）表2.我想知道的是哪个表格单元格触发了表格2。
完成第一项任务后，在表2中，我已经为橙色，苹果和香蕉三个选项中的每一个提供了id，当用户点击这些选项中的任何一个时，我希望将该单元格的文本写入单元格从表1中首先触发了表2。
我不知道如何处理这个并且对Javascript知之甚少，我的研究证明并没有像我想要的那样有效，因此如果有人可以帮助我，我真的很感激。
提前致谢，如果我的问题不够明确，请告诉我。
答案 0 :(得分：1)
这是一个更新的小提琴 - ＆gt; https://jsfiddle.net/lexicalnoscope/o8dn70h7/1/
在这种情况下，不是将click事件单独绑定到每个单元格，而是将其绑定到父表格更清晰：
<table width="300" border="1" onclick="toggleTable(event)">
进入toggleTable函数后，event.target标识生成click事件的元素。您可以通过检查标记名是否等于“TD”
if(event.target.tagName == "TD")
一旦执行了菜单切换，表格单元格就会传递给处理函数，以执行您需要执行的任何操作：
doSomethingWithTableCell(event.target)在这种情况下，我让它提醒初学者的身份：
function doSomethingWithTableCell(cell){
alert(cell.id)
}
在那里工作，您应该能够使用类似的模式来处理第二个表上的点击事件
答案 1 :(得分：1)
您不需要为每个onclick附加td处理程序。这是一项繁琐的工作。而只是委托事件。这是修改后的代码段
HTML
<table width="300" border="1" id="menuitems">
<tbody>
<tr>
<td id="cell1"> On-Menu</td>
<td id="cell2"> On-Menu</td>
<td id="cell3"> On-Menu</td>
<td id="cell4"> On-Menu</td>
</tr>
<tr>
<td id="cell5"> On-Menu</td>
<td id="cell6"> On-Menu</td>
<td id="cell7"> On-Menu</td>
<td id="cell8"> On-Menu</td>
</tr>
<tr>
<td id="cell9"> On-Menu</td>
<td id="cell10"> On-Menu</td>
<td id="cell11"> On-Menu</td>
<td id="cell12"> On-Menu</td>
</tr>
</tbody>
</table>
<table width="300" border="1" id="menulist">
<tbody>
<tr>
<td id="cellorange"> Orange</td>
</tr>
<tr>
<td id="cellapple"> Apple</td>
</tr>
<tr>
<td id="cellbanana"> Banana</td>
</tr>
</tbody>
</table>
用户可以单击表1中的任何单元格，这将触发表格 toggleTable函数和切换（显示/隐藏）表2.我想要的 知道是哪个表格单元格触发了表格2。
这个js做了其余的工作
var cachClickElem =0; // a variable to track the clicked td of 1st table
$("#menuitems").on('click','td',function(event){
cachClickElem = this.id // update variable with the id of clicked td
var lTable = document.getElementById("menulist");
// toggle display of second table
lTable.style.display = (lTable.style.display == "table") ? "none" : "table";
})
$("#menulist").on('click','td',function(event){
// get text content of td from second table which is clicked
var getContent =$(this).text();
if(cachClickElem != 0){
// Change text of last clicked td of 1st table
$("#"+cachClickElem).text(getContent);
}
})
答案 2 :(得分：1)
您不需要将事件处理程序分配给第一个表的每个单元格，坦率地说，它使用了一种非常古老的技术来执行它不再受欢迎。此外，您不需要添加＆amp; nbsp;在单元格中的每个文本之前，您可以使用常规空间，因为客户端只在多个空格中删除空格。
这是解决问题的非JQquery（直接JavaScript）方法：
var firstTable = document.getElementById("table1")
var firstTableCells = firstTable.getElementsByTagName("td");
var lTable = document.getElementById("menulist");
var lTableCells = null;
var actionCell = null;
for(var i = 0; i < firstTableCells.length; ++i){
firstTableCells[i].addEventListener("click", function(evt){
actionCell = evt.srcElement;
lTable.style.display = (lTable.style.display === "table") ? "none" : "table";
if(lTable.style.display === "table"){
lTableCells = lTable.getElementsByTagName("td");
for(var x = 0; x < lTableCells.length; ++x){
lTableCells[x].addEventListener("click", function(){
actionCell.innerHTML = this.innerHTML;
});
}
}
});
}
JSFiddle：https://jsfiddle.net/pz6tc3ae/17/
答案 3 :(得分：0)
DEMO - ＆gt; https://jsfiddle.net/pz6tc3ae/1/
通过onclick="toggleTable(this)"
在您的函数中，您可以回读为function toggleTable(element) {
function toggleTable(element) {
alert(element.id); // alerts the id
var lTable = document.getElementById("menulist");
lTable.style.display = (lTable.style.display == "table") ? "none" : "table";
}
答案 4 :(得分：0)
简单的javascript解决方案：
从HTML中删除所有onclick属性并附加EventListener
document.addEventListener('DOMContentLoaded', function() {
[].map.call(document.querySelectorAll('#menuitems td'), function(elem) {
elem.addEventListener('click', function() {
alert(this.id)
})
})
}, false)<table width="300" border="1" id="menuitems">
<tbody>
<tr>
<td id="cell1"> On-Menu</td>
<td id="cell2"> On-Menu</td>
<td id="cell3"> On-Menu</td>
<td id="cell4"> On-Menu</td>
</tr>
<tr>
<td id="cell5"> On-Menu</td>
<td id="cell6"> On-Menu</td>
<td id="cell7"> On-Menu</td>
<td id="cell8"> On-Menu</td>
</tr>
<tr>
<td id="cell9"> On-Menu</td>
<td id="cell10"> On-Menu</td>
<td id="cell11"> On-Menu</td>
<td id="cell12"> On-Menu</td>
</tr>
</tbody>
</table>
<table width="300" border="1" id="menulist">
<tbody>
<tr>
<td id="cellorange"> Orange</td>
</tr>
<tr>
<td id="cellapple"> Apple</td>
</tr>
<tr>
<td id="cellbanana"> Banana</td>
</tr>
</tbody>
</table>