html定义一个div作为弹窗，主要实现的控制样式：display=‘block/none’,使我们定义的div隐藏或者浮现，
主要实现，在table的tr上定义事件，当我们点击或者鼠标悬停，会出现弹框，显示行内容；
1、首先使用html+css+jquery实现点击表格行任意处，出现弹框;
部分代码如下：
html 的 table tr以及弹窗div代码代码，定义一个表格：
//表格代码
<div >
<tbody>
<tr th:each="item1:${list1}" >
<td th:text="${}" style="text-align: left"></td>
<td th:text="${}" style="text-align: left"></td>
<td th:text="${}" style="text-align: left"></td>
<td th:text="${}" style="text-align: left"></td>
</tr>
</tbody>
<div>
//弹窗div
<div class="diceng" id='diceng' style="display:none">
<div class="tankuang">
<div >
<span>弹窗标题</span>
<!-- //点击关闭按钮 -->
<div ><input type="button" value="x"/></div>
</div>
<div >
<div ></div>
<div ></div>
<div ></div>
<div ></div>
</div>
</div>
</div>
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>
jquery代码如下：
//弹框数据赋值设置，如果想要进行鼠标悬停显示，将click改为mouseover
$("#demo3 tbody").on("click", "tr", function() {
var data = new Array;
var td = $(this).find("td");
/*for (var i = 0; i < ; i++) {
$('#tables').text((i).text());
}*/
/*$('#tkid').text("ID:"+(4).text());
$('#tkauthorId').text("填写人ID:"+(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");
})
2、使用html+css+js实现鼠标悬停时弹出框，移除鼠标框消失;
原理差不多，只是获取元素的方法不一样
html代码
<!-- 在行上面定义悬停事件 -->
<tbody>
<tr th:each="item1:${list1}" onmouseover="showDiv(this)" onmouseout="hideDiv()">
<td th:text="${}" style="text-align: left"></td>
<td th:text="${}" style="text-align: left"></td>
<td th:text="${}" style="text-align: left"></td>
<td th:text="${}" 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>
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>
js代码：
<script>
function showDiv(item){
//(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>