jquery，动态表格，事件绑定

最新推荐文章于 2021-12-02 16:04:47 发布

Java～develop

最新推荐文章于 2021-12-02 16:04:47 发布

阅读量3.2k

点赞数

分类专栏：前端文章标签： jquery 表格事件绑定

本文链接：https://blog.csdn.net/matengbing/article/details/53190928

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

jquery动态表格，为每一个tr添加悬浮事件，span添加点击事件

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'showTeachers.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
		<link href="./bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" href="styles.css">
	<script src="js/jquery-2.1.1.min.js" type="text/javascript">
		</script>
	<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js" type="text/javascript"></script>	
 	<style>
 		#edit_teacher{
 			padding-right:15px;
 		}
		#edit_teacher,#delete_teacher{
			cursor:pointer;
			display:none;
		}
 	</style>
  </head>
  
  <body>
     <div class="container">
    	<div id="nav_top">
    		
    	</div>
		<div id="table_teacher">
		
	</div>
    </div>
	
    <br>

  </body>
  
  <script language="JavaScript">
  	   var $table=$('<table class="table table-hover"></table>');
  	$(document).ready(function(){

		$("#nav_top").load("nav/nav_top.jsp");
		var s='${json}';  
		var s=eval("("+s+")");
		
		createTable("table_teacher",s);
	});
	
	
	
	    function createTable(div,s){
       // var $table=$('<table class="table table-hover " id="table_teacher_main" style="table-layout:fixed"></table>');
        $("div").append($table);
        var $caption=$('<caption style="text-align:center;">jquery生成bootstrap表格</caption>');
        $table.append($caption);
        var $thead=$('<thead></thead>');
        var $trs=$('<tr></tr>');
        var $th1=$('<th>姓名</th>');
        var $th2=$('<th>年龄</th>');
		var $th3=$('<th>电话</th>');
		var $th4=$('<th>操作</th>');
        $trs.append($th1);
        $trs.append($th2);
		  $trs.append($th3);
		 $trs.append($th4);
        $thead.append($trs);
        $table.append($thead);
       for(var p=0;p<s.length;p++){
		 create_tbody(s[p].id,s[p].name,s[p].tel_phone);
	   }
      
    }
    function create_tbody(td1, td2, td3){
		var $tr = $('<tr class="tr_content"></tr>');
		$table.append($tr);
		var $td1 = $('<td class="td_content1">' + td1 + '</td>');
		$tr.append($td1);
		var $td2 = $('<td class="td_content1">' + td2 + '</td>');
		$tr.append($td2);
		var $td3 = $('<td class="td_content1">' + td3 + '</td>');
		$tr.append($td3);
		var $td4 = $('<td width="10%"></td>');
		var $edit = $('<span class="text-info edit_teacher" id="edit_teacher">编辑</span>');
		var $delete = $('<span class="text-info delete_teacher" id="delete_teacher">删除</span>');
		$td4.append($edit);
		$td4.append($delete);
		$tr.append($td4);
		$(document).on("mouseover", ".tr_content", function(){
			
				$(this).children().each(function(){
					$(this).find("span").show();
			
				});
		});
		
		$(document).on("mouseout", ".tr_content", function(){
				$(this).children().each(function(){
					$(this).find("span").hide();
				
				});
		});
	}
		
		
   

	
 </script>
</html>

Java～develop

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery，动态表格，事件绑定

jquery动态表格，为每一个tr添加悬浮事件，span添加点击事件<%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%>
复制链接

扫一扫

专栏目录