html+jquery/js+css 实现Table tr鼠标悬停/点击出现弹窗，显示表格行数据_html input鼠标悬浮 出现个文本框 全部显示内容

html定义一个div作为弹窗，主要实现的控制样式：display=‘block/none’,使我们定义的div隐藏或者浮现，
主要实现，在table的tr上定义事件，当我们点击或者鼠标悬停，会出现弹框，显示行内容；

1、首先使用html+css+jquery实现点击表格行任意处，出现弹框;

部分代码如下：
html 的 table tr以及弹窗div代码代码，定义一个表格：

//表格代码
<div id="demo3">
<tbody>
		<tr th:each="item1:${list1}" >
					<td th:text="${item1.unit}" style="text-align: left"></td>
					<td th:text="${item1.regin}" style="text-align: left"></td>
					<td th:text="${item1.linkman}" style="text-align: left"></td>
					<td th:text="${item1.contactNumber}" style="text-align: left"></td>			
		</tr>
	</tbody>
<div>
//弹窗div
<div class="diceng" id='diceng' style="display:none">
			<div class="tankuang">
				<div id="header">
					<span>弹窗标题</span>
					<!-- //点击关闭按钮 -->
					<div id="header-right"><input type="button" value="x"/></div> 
				</div>
				<div id="tksj">
				<div id="tkunit"></div>
				    <div id="tkregin"></div>
					<div id="tklinkman"></div>
					<div id="tkcontactNumber"></div>
					</div>
			</div>
		</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

css样式：

<style type="text/css">
/* 弹框样式*/ 
			.diceng{
				position: fixed;
				left: 72%;
				top: 35%;
				background: #000;
				width: 260px;
				height: 400px;
				opacity: 0.9;
			}
			.tankuang{
				position: relative;
				background: #040f3c;
				width: 100%;
				height: 100%;
				border-radius: 5px;
				margin:auto;
			}
			#header{
				height: 30px;	
			}
			#header span{
				color:#00ffff;
				font-size:20px;	
			}
			#header-right input{
			border-radius: 5px;
			background: red;
			}
			#header-right{
				position: absolute;
				width: 20px;
				height: 20px;
				color: #fff;
				right: 5px;
				top: 5px;
				text-align: center;
			}
			#tksj div{
			color: #e9aa00;
			}
		</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

jquery代码如下：

//弹框数据赋值设置，如果想要进行鼠标悬停显示，将click改为mouseover
$("#demo3 tbody").on("click", "tr", function() {
	var data = new Array;
	var td = $(this).find("td");
	/*for (var i = 0; i < td.length; i++) {
		$('#tables').text(td.eq(i).text());
		
	}*/
	
	/*$('#tkid').text("ID:"+td.eq(4).text());
	$('#tkauthorId').text("填写人ID:"+td.eq(5).text());*/
	if(td!=null || td!=""){
	$('#tkunit').text("xx:"+td.eq(0).text());
	$('#tkregin').text("xx:"+td.eq(1).text());
	$('#tklinkman').text("xx:"+td.eq(2).text());
	$('#tkcontactNumber').text("xx:"+td.eq(3).text());	
	$('#diceng').css("display", "");
	}
})
//鼠标移除后弹框消失
/*$("#demo3 tbody").on("mouseout", "tr", function() {
	$('#diceng').css("display", "none");
})*/

//窗口关闭按钮
$("#header-right").click(function(){
	$('#diceng').css("display", "none");
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

2、使用html+css+js实现鼠标悬停时弹出框，移除鼠标框消失;

原理差不多，只是获取元素的方法不一样
html代码

<!-- 在行上面定义悬停事件 -->
<tbody>
		<tr th:each="item1:${list1}" onmouseover="showDiv(this)" onmouseout="hideDiv()">
				<td th:text="${item1.unit}" style="text-align: left"></td>
				<td th:text="${item1.regin}" style="text-align: left"></td>
				<td th:text="${item1.linkman}" style="text-align: left"></td>
				<td th:text="${item1.contactNumber}" style="text-align: left"></td>
		</tr>
</tbody>

<!--div弹窗代码-->
<div id="info" class="white_content">
	<div style="text-align:center;height:30px;Font-size:21px;font-weight: bold;color:#54dcf2">xx信息</div>
		<div id='tkunit' class="row ">xx:</div>
		<div id='tkregin' class="row div-a">xx:</div>
		<div id='tklinkman' class="row div-b">xx:</div>
		<div id='tkcontactNumber' class="row div-a">xxxx:</div>
	</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

css代码：

<style>
        .white_content {
            display: none;
            position: absolute;
            width:500px;
            height:322px;
            padding: 20px;
            border: 4px solid orange;
            background-color: #040f3c;
            z-index:1002;
            overflow: none;
        }
        .row{
        	height:27px;
        	padding-left:20px;
        	width:106.5%;
        	float:left;
        	vertical-align:middle;
        	margin-top:1px;
        	color:orange;
        	border: 1px solid #54dcf2;
        }
        .div-a{ float:left;width:240px;border:1px solid #54dcf2} 
		.div-b{ float:right;width:240px;border:1px solid #54dcf2} 
    </style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

js代码：

<script>
	function showDiv(item){
		//console.log(item);
		//debugger;
		var unit=document.getElementById('unit');
		unit.innerText="名称："+item.cells[0].textContent;
		
		var div=document.getElementById('info');
		div.style.left= document.documentElement.clientWidth-545+'px';
		div.style.top=event.clientY-340+'px';  //控制鼠标距离弹框的上端位置
		div.style.display='block';
		
	}
	function hideDiv(){
		document.getElementById('info').style.display='none';
	}
	</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17