jsp TD的鼠标悬停和取消改变值

最新推荐文章于 2021-08-23 14:00:15 发布

原创最新推荐文章于 2021-08-23 14:00:15 发布 · 2.3k 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一种使用JavaScript实现的显示和隐藏元素的技巧，通过鼠标悬停事件，巧妙地在两个相邻的表格数据单元格间切换显示内容，适用于动态展示敏感信息或详细数据的场景。

<td style="text-align: left;" class="blue" onmousemove="showGuarantorNumberId(this);" onmouseout="hiddenGuarantorNumberId(this);" ><label
class="control-label laberCss" >${userInfoGuarantorDTO.guarantorNumberIdFormat}</label></td>
<td style="text-align: left; display:none;" class="blue" ><label
class="control-label laberCss">${userInfoGuarantorDTO.guarantorNumberId}</label></td>

在需要改变值的TD下面在定义一个TD,隐藏 display:none;,然后调用js.

function showGuarantorNumberId(obj) {
   var obj = $(obj);
   var value = obj.next().children("label:first-child").html();
   obj.children("label:first-child").html(value);
}

function hiddenGuarantorNumberId(obj) {
   var obj = $(obj);
   var value = obj.prev().children("label:first-child").html();
   obj.children("label:first-child").html(value);
}