<html>
<head>
<meta charset="UTF-8">
<title>冒泡</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script>
$(function() {
$("#parent").click(function() {
$("#son").css({ "background": "red" })
})
$("#son").click(function() {
$(this).stopPropagation();
$("#parent").css({ "background": "blue" })
})
});
</script>
</head>
<body>
<div id="parent" style="width: 400px;height:300px;border: 1px solid red;">
<div id="son" style="margin: 0 auto;width: 200px;height:200px;border: 1px solid blue;">
</div>
</div>
</body>
</html>
例子：
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/jquery.min.js" ></script>
<script>
$(function(){
/* $('tbody tr').click(function(){
$(this).css({ "background": "red" });
})*/
// 冒泡机制 你机智了
$(document).on("dblclick",".editInput",function(){
var val=$(this).html();
var ipt=$('<input />');
var _this=$(this);
$(this).html(ipt);
//$(this).html('<input id="ddd" />');
//$(this).html(ipt[0].outerHTML);
ipt.val(val)
ipt.focus();// 聚焦
ipt.blur(function(){
var v=$(this).val();
if(v!=val){
_this.html(v);
$(this).remove();
}else{
_this.html(v);
$(this).remove();
}
})// 失去 焦点
//$("#dd").focus().val(val);
//$(this).text('<input />'); 就是文本 不渲染标签
})
// 添加事件
$('#add-btn').click(function(){
var $tr='<tr><td>kk</td><td>11</td><td>男</td></tr>'
$('table tbody').append($tr);
})
})
</script>
</head>
<body>
<div style="width: 300px;margin: 0 auto;">
<button id="add-btn">添加</button>
<table border="1">
<thead >
<tr>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
</tr>
</thead>
<tbody>
<tr>
<td class="editInput">kd</td>
<td>18</td>
<td>男</td>
</tr>
<tr>
<td>kd</td>
<td>18</td>
<td>男</td>
</tr>
<tr>
<td>kd</td>
<td>18</td>
<td>男</td>
</tr>
<tr>
<td>kd</td>
<td>18</td>
<td>男</td>
</tr>
<tr>
<td>kd</td>
<td>18</td>
<td>男</td>
</tr>
<tr>
<td>kd</td>
<td>18</td>
<td>男</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
849
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
