表鼠标悬停

时间:2015-06-09 19:55:50

标签: javascript html

当你在每张桌子上移动鼠标时,我正在玩桌子并改变文字。这段代码我现在可以更改第一个表格的文本,但我不知道如何让它对其他表格起作用......

<script type="text/javascript">
    function highlight(id) {
        document.getElementById("name").innerHTML = "SF";
    }

    function unhighlight(id) {
        document.getElementById("name").innerHTML = "Giants";
    }
    for (i = 0; i < 5; i++) {
        document.write('<table width="300" id="i" onmouseover="highlight(i);" onmouseout="unhighlight(i);">');
        document.write('<tr>');
        document.write('<td id="name">Giants</td>');
        document.write('<td>5</td>');
        document.write('</tr>');
        document.write('</table>');
    }
</script>

1 个答案:

答案 0 :(得分:3)

这是因为id名称在所有表格中重复出现。因此document.getElementById("name")将始终找到标识为name的第一个元素。你必须在每个表中使它独特,然后它应该工作正常。此外,您必须将某些内容传递给highlight方法,以识别鼠标过/放表。

&#13;
&#13;
 function highlight(id) {
   document.getElementById("name" + id).innerHTML = "SF";
 }

 function unhighlight(id) {
   document.getElementById("name" + id).innerHTML = "Giants";
 }

 for (i = 0; i < 5; i++) {
   document.write('<table width="300" id="i" onmouseover="highlight(' + i + ');" onmouseout="unhighlight(' + i + ');">');
   document.write('<tr>');
   document.write('<td id="name' + i + '">Giants</td>');
   document.write('<td>5</td>');
   document.write('</tr>');
   document.write('</table>');
 }
&#13;
&#13;
&#13;