div的双击事件的js脚本怎么写？

<select name="selScore">
    <option value="优秀">优秀</option>
    <option value="优良">优良</option>
    <option value="及格">及格</option>
    <option value="不及格">不及格</option>
</select><div style="width:300px;height:300px">
    <table width="400px" height="350px" border="1">
        <tr>
            <td><div id="div0101">语文</div></td>
            <td><div id="div0102">数学</div></td>
        </tr>
        <tr>
            <td><div id="div0201">英语</div></td>
            <td><div id="div0202">化学</div></td>
        </tr>
    </table>
</div>div是嵌套的，在双击里面的div时，将该div的内容变成：原来的内容+下拉框中所选择的值
比如：用鼠标双击了“语文”这个div，那么这个div的内容就变成“语文：优秀”

解决方案 »

  1.   

    <select name="selScore" id="selScore">
        <option value="优秀">优秀</option>
        <option value="优良">优良</option>
        <option value="及格">及格</option>
        <option value="不及格">不及格</option>
    </select>
    <script>
        function dblEvent(e) {
            var o = e.srcElement || e.target;
            o.innerHTML = o.innerHTML.split('：')[0] + '：' + document.getElementById('selScore').value;
        }
    </script>
    <div style="width:300px;height:300px" ondblclick="dblEvent(event)">
        <table width="400px" height="350px" border="1">
            <tr>
                <td><div id="div0101">语文</div></td>
                <td><div id="div0102">数学</div></td>
            </tr>
            <tr>
                <td><div id="div0201">英语</div></td>
                <td><div id="div0202">化学</div></td>
            </tr>
        </table>
    </div>
      

  2.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <script type="text/javascript">
    function init(){
    var tds=document.getElementsByTagName("td");
    for(var i=0;i<tds.length;i++){
    tds[i].ondblclick=change;
    }
    }
    function change(){
    var text=this.firstChild.firstChild;
    var se=document.getElementsByName("selScore")[0];
    var t=se[se.selectedIndex].value;
    text.nodeValue=text.nodeValue+t;
    this.ondblclick=null;
    }
    window.onload=init;
    </script>
    </head><body>
    <select name="selScore">
        <option value="优秀">优秀</option>
        <option value="优良">优良</option>
        <option value="及格">及格</option>
        <option value="不及格">不及格</option>
    </select><div style="width:300px;height:300px">
        <table width="400px" height="350px" border="1">
            <tr>
                <td><div id="div0101">语文</div></td>
                <td><div id="div0102">数学</div></td>
            </tr>
            <tr>
                <td><div id="div0201">英语</div></td>
                <td><div id="div0202">化学</div></td>
            </tr>
        </table>
    </div>
    </body>
    </html>
    大体这样试试
      

  3.   

    <select name="selScore" id="selScore">
         <option value="优秀">优秀</option>
         <option value="优良">优良</option>
         <option value="及格">及格</option>
         <option value="不及格">不及格</option>
     </select>
     
    <div style="width:300px;height:300px">
         <table width="400px" height="350px" border="1" id="tb1">
             <tr>
                 <td><div id="div0101">语文</div></td>
                 <td><div id="div0102">数学</div></td>
             </tr>
             <tr>
                 <td><div id="div0201">英语</div></td>
                 <td><div id="div0202">化学</div></td>
             </tr>
         </table>
     </div><script type="text/javascript">
        $("#tb1 div").bind("dblclick", function () {
            $(this).html($(this).html() +" : "+ $("#selScore").val());
        });
    </script>
      

  4.   


    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
    $(function(){
    $("table div").bind("dblclick",function(){
    $(this).text($(this).text()+":"+$("#selScore").val());
    })
    })
    </script>
    <select name="selScore" id="selScore">
        <option value="优秀">优秀</option>
        <option value="优良">优良</option>
        <option value="及格">及格</option>
        <option value="不及格">不及格</option>
    </select>
    <div style="width:300px;height:300px">
        <table width="400px" height="350px" border="1">
            <tr>
                <td><div id="div0101">语文</div></td>
                <td><div id="div0102">数学</div></td>
            </tr>
            <tr>
                <td><div id="div0201">英语</div></td>
                <td><div id="div0202">化学</div></td>
            </tr>
        </table>
    </div>