<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Table</title>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>Short Name</th>
<th>Name</th>
</tr>
<tr>
<td>N1</td>
</tr>
<tr>
<td>N2</td>
</tr>
<tr>
<td>N3</td>
</tr>
<tr>
<td>N4</td>
</tr>
</table>
</body>
</html>
例如,当我将鼠标悬停在第一行中时,第二行在N1旁边显示NAME1。我不能使用jquery或CSS,只能使用javascript。我需要按1而不是整个表格的方式进行这项工作,因此,如果鼠标位于N1上,然后将其移至N2,则会消失NAME1并显示NAME2。我不知道用html或javascript控制第二行是否更好,用HTML生成第二行或使用javascript生成更好。另外,当鼠标没有在第一行中徘徊时,第二行必须清除。
为此,您不需要JS。这将是漫长而混乱的。这是一个非常简单的CSS解决方案:
table, th, td { border: 1px solid black; }
td:last-child{visibility:hidden;}
tr:hover td:last-child{visibility:visible;}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句