Table Mouseover

Question

Я играл с таблицами и менял текст, когда вы наводили указатель мыши на каждый стол. Этот код я сейчас работает, чтобы изменить текст первой таблицы, но я не знаю, как заставить его работать для других таблиц, а также ...

<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> 

Answer 1

Это потому, что id имя повторяется во всех таблицах , поэтому document.getElementById("name") всегда найдет первый элемент с идентификатором name. Вы должны сделать его уникальным в каждой таблице, тогда он должен работать нормально. Также вам нужно передать что-то методу highlight, чтобы идентифицировать таблицу мыши над/вне.

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>'); 
 
}