我的网页动态地生成一个表，表行类为tableTr，HTML代码中包含一个SVG图像，路径类为pathClass。
使用JavaScript，当鼠标悬停在表格行上时，行的背景颜色以及相应形状的填充颜色应该改变;一旦鼠标移离表格行，两者都恢复正常。
当鼠标悬停在路径上时，路径不应改变填充颜色;这不能反过来起作用。
我完全不知道该用什么方法。我的HTML代码如下：
<table>
<tr>
<td>
<!--the dynamically generated table with the rows
that need highlighted-->
<table id="resultsTable"></table>
</td>
<td>
<object id="map">
<svg id="mapSvg">
<path id="c000000" class="pathClass"></path>
</svg>
</object>
</td>
</tr>
</table>我的动态生成表的JS代码如下所示：
var table = document.createElement("table");
table.setAttribute("class", "resultsTable");
table.setAttribute("id", "resultsTable");
for (var q = 0; q < 3143; q++){
var tr = document.createElement("tr");
tr.setAttribute("class", "tableTr");
var td1 = document.createElement('td');
td1.setAttribute("class", "tableTd");
var td2 = document.createElement('td');
td2.setAttribute("class", "tableTd");
if (q % 2){
td1.setAttribute("bgcolor", "#DEEAF6");
td2.setAttribute("bgcolor", "#DEEAF6");
} else {
td1.setAttribute("bgcolor", "#FFFFFF");
td2.setAttribute("bgcolor", "#FFFFFF");
}
if (q){
var text1 = document.createTextNode(results[q-1][0]);
var text2 = document.createTextNode(results[q-1][1]);
td1.appendChild(text1);
td2.appendChild(text2);
tr.appendChild(td1);
tr.appendChild(td2);
table.appendChild(tr);
} else {
var text1 = document.createTextNode("County");
var text2 = document.createTextNode("Deviation from Optimal");
td1.appendChild(text1);
td2.appendChild(text2);
tr.appendChild(td1);
tr.appendChild(td2);
table.appendChild(tr);
}
}
document.getElementById("resultsCell").appendChild(table);
1条答案
按热度按时间jtw3ybtb1#
我相信你想达到的效果与下面的效果类似，当鼠标悬停在表格中对应的行上时，Map中的每个国家都会高亮显示，而当鼠标悬停在国家形状（html中的国家路径）上时，它不会高亮显示。