我正在尝试建立一个虚拟照片库，其中有一个表列出了每个图像的详细信息，这样当用户将鼠标悬停在图像上时，表中相应的行就会高亮显示。我想做到这一点，而不需要为每个图像/行对编写单独的函数。我想出了一个解决方案，当我遇到障碍时，离成功只有一步之遥。解释如下：
图像HTML:
<img id="photo1" onmouseover="imgSelectOn(this)" class="img-rounded" src="img/photo1.jpg" alt="">
<img id="photo2" onmouseover="imgSelectOn(this)" class="img-rounded" src="img/photo2.jpg" alt="">
表格行HTML:
<tr id="photo1row"><td>2015</td><td>photo1.jpg</td><td>Photo 1</td>
<tr id="photo2row"><td>2009</td><td>photo2.jpg</td><td>Photo 2</td>
其想法是脚本将在鼠标悬停上选择图像的id(例如"photo1"(；行"；到最后(例如"photo1row"(-现在您有了正确表行的id，允许我们执行一个函数来更改背景样式。
JavaScript:
function imgSelectOn(element) {
document.getElementById(" " + element.id + "row").style = "background: yellow";
}
当我运行这个时，我得到控制台错误
"未捕获的类型错误：document.getElementById(…(为null；。
我知道如果你不在括号中的值周围加引号[例如document.getElementById("photo1row"(]，就会出现这个错误，所以我在括号中又加了一对引号。。。
document.getElementById(" " " + element.id + "row" ").style = "background: yellow";
现在我得到控制台错误
"未捕获引用错误：imgSelectOn未定义"。
我试着用不同排列的引号/撇号("/'(来完成这项工作，但没有成功；浏览器无法理解。这是一个简单的打字错误造成的，还是我在这里使用了完全错误的逻辑？
Ben
您需要对代码进行一些调整，
您需要在选择时删除空白，
您需要在表内装饰行，请参阅下面的示例
(https://jsfiddle.net/q8a6mteL/2/)