table表格里面td的点击冒泡事件

本文主要是介绍table表格里面td的点击冒泡事件，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

html部分：

<div class="wrapper"><div class="container"><table><tr><td>项目一：</td><td><input type="button" class="btn" οnclick="buttonClick();" value="点击弹框" /><div class="win-con"><ul><li>进行中：100 </li><li>未完成：33 </li><li>已处理问题：21 </li><li>待解决问题：23 </li></ul>						</div></td><td>项目二：</td><td><input type="button" class="btn" οnclick="buttonClick();" value="点击弹框" /><div class="win-con"><ul><li>进行中：100 </li><li>未完成：33 </li><li>已处理问题：21 </li><li>待解决问题：23 </li></ul>						</div></td><td>项目三：</td><td><input type="button" class="btn" οnclick="buttonClick();" value="点击弹框" /><div class="win-con"><ul><li>进行中：100 </li><li>未完成：33 </li><li>已处理问题：21 </li><li>待解决问题：23 </li></ul></div></td><td>项目四：</td><td><input type="button" class="btn" οnclick="buttonClick();" value="点击弹框" /><div class="win-con"><ul><li>进行中：100 </li><li>未完成：33 </li><li>已处理问题：21 </li><li>待解决问题：23 </li></ul>						</div></td></tr><tr><td>项目一：</td><td><input type="button" class="btn" οnclick="buttonClick();" value="点击弹框" /><div class="win-con"><ul><li>进行中：100 </li><li>未完成：33 </li><li>已处理问题：21 </li><li>待解决问题：23 </li></ul>						</div></td><td>项目二：</td><td><input type="button" class="btn" οnclick="buttonClick();" value="点击弹框" /><div class="win-con"><ul><li>进行中：100 </li><li>未完成：33 </li><li>已处理问题：21 </li><li>待解决问题：23 </li></ul>						</div></td><td>项目三：</td><td><input type="button" class="btn" οnclick="buttonClick();" value="点击弹框" /><div class="win-con"><ul><li>进行中：100 </li><li>未完成：33 </li><li>已处理问题：21 </li><li>待解决问题：23 </li></ul>						</div></td><td>项目四：</td><td><input type="button" class="btn" οnclick="buttonClick();" value="点击弹框" /><div class="win-con"><ul><li>进行中：100 </li><li>未完成：33 </li><li>已处理问题：21 </li><li>待解决问题：23 </li></ul></div></td></tr></table></div></div>

javascript部分：

<script>function buttonClick(){//不同浏览器对冒泡的不同处理方法if (event.stopPropagation){// this code is for Mozilla and Opera event.stopPropagation();}else if (window.event) {// this code is for IE window.event.cancelBubble = true;}//点击按钮事件：邻近的div.win-con弹出，其他位置的div隐藏$(".btn").click(function(){$(this).next(".win-con").show();$(this).parent().siblings().children(".win-con").hide();$(this).parent().parent("tr").siblings().children().children(".win-con").hide();});//点击全部dom，都会触发的事件，弹框隐藏$("body").click(function(){					$(".win-con").hide();});//点击弹出的弹框，弹框不隐藏$(".win-con").click(function(){if (event.stopPropagation){// this code is for Mozilla and Opera event.stopPropagation();}else if (window.event) {// this code is for IE window.event.cancelBubble = true;}});}</script>

css样式：

*{margin: 0;padding: 0;}ul,li{list-style: none;}html,body{width: 100%;height: 100%;}.wrapper {width: 100%;height: 100%;}.container{width: 1000px;margin: 30px auto;height: auto;}.container table {width: 100%;text-align: center;border-collapse: collapse;}.container table td {position: relative;padding: 5px;border: 1px solid #CCCCCC;}.btn {cursor: pointer;}.win-con{display: none;position: absolute;height: auto;padding: 5px;background-color: #ffffdd;border: 1px solid #F9D049;z-index: 2;}.win-con ul {padding: 10px;white-space: nowrap;text-align: left;}