HTMLテーブルの列のみすべての最初のオーディオのサウンドを再生

Question

マウスオーバーで列が対応するサウンドを再生する行あたり2列の表を作成しました。問題は、すべての列に対して最初のサウンドtest1.oggを再生することだけですか？

window.onload = function() { 
    var mySound = document.getElementById('mySound'); 
    var myIcons = document.getElementsByClassName('myIcon'); 

    for(var i = 0; i < myIcons.length; i++) { 
     myIcons[i].onmouseover = function() { 
     mySound.play(); 
     return false; 
     }; 
    }; 
}; 

<tr> 
    <td class="myIcon">Test1 
     <audio id='mySound' preload="auto"><source src='test1.ogg'/> 
     </audio> 
    </td> 
    <td class="myIcon">Test2 
     <audio id='mySound' preload="auto"><source src='test2.ogg'/> 
     </audio> 
    </td> 
</tr> 

Answer 1

IDは一意である必要があります。しかし、テーブルに5000個の細胞があるとすれば、5000人のリスナーがぶらつくでしょう。いい考えではない。代わりに、あなたはあなたの親要素に一つだけのリスナーを使用することができますし、このように、マークアップクリーナーを作るために、すべてのクラスとID-Sを取り除く：私はTypeError例外を取得しています

window.onload = function() { 
    document.getElementById("myTable").addEventListener("mouseover", function(e) { 
    if (e.target.tagName === "TD") { 
     e.target.childNodes[1].play(); 
     return false; 
    } 
    }, false); 
}; 

<table id="myTable"> 
<tr> 
    <td>Test1 
     <audio preload="auto"><source src='test1.ogg'/></audio> 
    </td> 
    <td>Test2 
     <audio preload="auto"><source src='test2.ogg'/></audio> 
    </td> 
</tr> 
</table>