<html>
<head>
<title>表格行高亮</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
/**
鼠标移到行上，此行背景变为粉红，鼠标移开，背景颜色消失
*/
function changeBgcolor(tr,num){
if(num==1){
if(tr.bgColor != "yellow"){
tr.bgColor = "pink";
}
}else if(num == 2){
if(tr.bgColor != "yellow"){
tr.bgColor = "";
}
}
}
//全选
function selAll(){
var size = 3;//实际的行数
if(document.getElementById("checkbox0").checked == true){
for(i=0;i<size;i++){
if(!document.getElementById("checkbox"+i).checked == true){
document.getElementById("checkbox"+i).checked = true;
}
document.getElementById("line1").bgColor = "yellow";
document.getElementById("line2").bgColor = "yellow";
}
}else{
for(i=0;i<size;i++){
document.getElementById("checkbox"+i).checked = false;
document.getElementById("line1").bgColor = "";
document.getElementById("line2").bgColor = "";
}
}
}
//选中行，行背景颜色变为黄色
function selected(checkboxId,trId){
if(document.getElementById(checkboxId).checked == true){
document.getElementById(trId).bgColor = "yellow";
}else{
document.getElementById(trId).bgColor = "";
}
}
</script>
</head>
<body>
<table border="1">
<tr>
<td>
<input type="checkbox" id="checkbox0" onclick="selAll()">
</td>
<td>
标题
</td>
<td>
内容
</td>
</tr>
<tr id="line1" onmouseover="changeBgcolor(this,1)" onmouseout="changeBgcolor(this,2)">
<td>
<input type="checkbox" id="checkbox1" onclick="selected('checkbox1','line1')">
</td>
<td>
js技术
</td>
<td>
js非常重要
</td>
</tr>
<tr id="line2" onmouseover="changeBgcolor(this,1)" onmouseout="changeBgcolor(this,2)">
<td>
<input type="checkbox" id="checkbox2" onclick="selected('checkbox2','line2')">
</td>
<td>
Java学习
</td>
<td>
Java博大精深
</td>
</tr>
</table>
</body>
</html>
分享到：
相关推荐
例如，要调整 A 列的宽度，只需将鼠标移到 A、B 两列之间，当鼠标指针变成双向箭头时，双击鼠标左键，A 列将立即调整到最合适的列宽。类似地，我们也可以快速调整行高。 ### 调整行高和列宽的单位 ----------------...
首先，我们需要将鼠标移到需要调整的行高之间，当鼠标指针变成双向箭头时，双击鼠标左键，Excel 就会自动将行高调整到最合适的尺寸。如果我们需要调整多个单元格的行高，可以选中需要调整的单元格，选择菜单“格式-...
当鼠标移到表格的某一行上时，改变该行的背景色可以提供更好的视觉反馈。这同样可以通过CSS实现，添加`:hover`伪类： ```css tr:hover { background-color: #ccc; /* 或者其他颜色 */ } ``` 当鼠标悬停在...
我们可以把鼠标移到需要调整的行之间，当鼠标指针变成双向箭头时，双击鼠标左键，行高即会调整到最合适的尺寸。 如果需要调整多个行，我们可以选中需要调整的单元格，选择菜单"格式-行-最合适的行高"，即可完成多...
对于单行或单列的调整，你可以将鼠标移到两行之间的列号处，当鼠标指针变为双向箭头形状时，按住鼠标左键上下拖动以改变行高，或左右拖动以调整列宽。在拖动过程中，屏幕会显示当前的宽度值，帮助你精确控制调整。...
选中要调整的单元格，然后将鼠标指针移到单元格的边框处，当指针变成双箭头形状时，按住鼠标左键，并向上或向下拖动以调整行高。 2. 使用“设置单元格格式”对话框调整行高 选中要调整的单元格，然后右键单击，...
例如第一行行高过小，把鼠标移到第一、二行之间，当鼠标指针变成双向箭头时，双击鼠标左键，第一行立即调整到最合适行高。如果有多行需要调整，我们可以选中需要调整的单元格，选择菜单"格式-行-最合适的行高'，即可...
- 将鼠标指针移至行标题的下边界，当指针变为双箭头时，双击鼠标左键即可。 ### 总结 通过上述两种方法，我们可以轻松地实现Excel单元格行高和列宽的自动调整。这些技巧不仅能够帮助我们更高效地管理和呈现数据，...
1. CSS实现鼠标悬停变色效果：通过CSS的:hover伪类可以实现当鼠标悬停在表格行上时改变行背景色的效果。示例代码中展示了当鼠标悬停在表格的某个行（tr元素）上时，背景色会变为#CCCCCC。 2. CSS奇偶行颜色交替：在...
比如，可以为每一行添加JavaScript代码，这些代码会在鼠标移入（`onMouseOver`）或移出（`onMouseOut`）时执行，从而改变该行的背景颜色，达到高亮显示的效果。 #### 代码实现步骤 1. **添加GridView控件到页面**：...
- **调整行高与列宽**：鼠标移到横线或纵线位置，指针变化后上下或左右拖动来调整。 4. **输入文本**： 在需要输入的单元格内点击，看到插入光标闪烁后，即可输入文本。 5. **单元格文本对齐**： - **垂直对齐...
- 鼠标移到表格边框上，光标变为双向箭头时，点击并拖动以调整表格宽度或高度； - 若要仅调整某个单元格，需先选中该单元格，然后进行拖动； - 如果希望表格某列宽度按内容自动调整，可选中该列，右键点击选择...
5. **交互性**：利用:hover伪类，我们可以为表格创建悬停效果，当鼠标移到单元格上方时，可以改变其背景色、边框或其他样式，提高用户体验。此外，还可以通过CSS实现点击高亮、禁用状态等交互反馈。 6. **动画效果*...
1. 手动拖动：将鼠标移到行或列边框，变为调整图标，拖动调整大小。 2. 精确设置：通过“表格工具 布局”选项卡的“单元格大小”组输入具体数值，或使用“表格属性”对话框进行设置。 3. 自动调整：点击“自动调整”...
- 选择行/列：将鼠标移到行/列前，单击左键。 - 选择单元格：将鼠标移到单元格左侧，出现黑色斜箭头时单击左键。 - 选择整个表格：将指针移动到表格左上角，当出现十字箭头时单击左键。 3. **插入和删除行/列**...
选定行或列则需要将鼠标移到表格上方或左侧，根据箭头变化进行选择。要选定整个表格，只需在任意单元格内点击，然后通过“表格”菜单中的“选定”->“表格”。 插入单元格是表格动态调整的重要操作。插入新单元格时...
若需要调整列宽或行高，只需将鼠标移到列边界或行号上，当鼠标变为双向箭头时，按住鼠标左键拖动即可。 如果需要打印表格，需设置页面布局。选择“文件”>“页面设置”，在弹出的对话框中选择“方向”为“横向”，...
- **选定行和列**：将鼠标移到表格上方或左侧，根据箭头方向选择相应的行或列，拖动鼠标可以选择多行或多列。 - **选定整个表格**：将光标放在任一单元格内，通过"表格"菜单 -> "选定" -> "表格"来选定整个表格。 ...
接着，CSS部分定义了一个`.hover`类，设置了背景颜色为#666，这个颜色将在鼠标悬停时应用到`li`元素上。 在JavaScript部分，我们引入了jQuery库，并在文档加载完成后（`$(document).ready()`）执行一个自定义的`...
1. 手动调整：将鼠标移到表格边框线上，当鼠标变为双向箭头时，点击并拖动来改变列宽或行高。对于列宽，拖动列之间的分隔线；对于行高，拖动行的顶部或底部边框线。 2. 使用“布局”选项卡：在打开的表格中，选择...