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

beihua 2013-01-29 03:38:20

<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的内容就变成“语文：优秀”

...全文

1363 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

魔术世界中文版 2013-01-29

打赏
举报


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

qqqqqqqq_2013 2013-01-29

打赏
举报

jquery dbClick事件

函麻 2013-01-29

打赏
举报

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

似梦飞花 2013-01-29

打赏
举报

<!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> 大体这样试试

斯洛文尼亚旅游 2013-01-29

打赏
举报

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