div的双击事件的js脚本如何写
日期：2014-05-16 浏览次数：20490 次
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的内容就变成“语文：优秀”
------解决方案--------------------
jquery绑定dbClick事件
------解决方案--------------------
------解决方案--------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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的内容就变成“语文：优秀”
------解决方案--------------------
jquery绑定dbClick事件
------解决方案--------------------
<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>
------解决方案--------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
