鼠标动态改变表格样式
当鼠标移动到某行表格时,改行颜色改变,当鼠标移开后颜色恢复,当鼠标点击后颜色加深,移开后依旧加深,当鼠标再次单击其他行时,被点击的行颜色改变,原来被点击的行颜色恢复。效果如下图所示。
实现代码如下:
------------------------------------
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>table</TITLE>
<STYLE>
table
{
border-top:1px solid black;
border-left:1px solid black;
cursor:default;
}
td
{
border-bottom:1px solid black;
border-right:1px solid black;
height:23px;
}
</STYLE>
<SCRIPT language="javascript">
function change()
{
var oObj = event.srcElement;
if(oObj.tagName.toLowerCase() == "td")
{
var oTr = oObj.parentNode;
for(var i=1; i<document.all.table1.rows.length; i++)
{
document.all.table1.rows[i].style.backgroundColor = "";
document.all.table1.rows[i].tag = false;
}
oTr.style.backgroundColor = "#4169E1";
oTr.tag = true;
}
}
function out()
{
var oObj = event.srcElement;
if(oObj.tagName.toLowerCase() == "td")
{
var oTr = oObj.parentNode;
if(!oTr.tag)
oTr.style.backgroundColor = "";
}
}
function over()
{
var oObj = event.srcElement;
if(oObj.tagName.toLowerCase() == "td")
{
var oTr = oObj.parentNode;
if(!oTr.tag)
oTr.style.backgroundColor = "#B0E2FF";
}
}
</SCRIPT>
</HEAD>
<BODY>
<TABLE id="table1" width="50%" border="0" cellpadding="0" cellspacing="0">
<TR style="background-color:#999999; border-bottom:2px solid black; height:25px" align="center">
<TD width="25%">one</TD>
<TD width="25%">two</TD>
<TD width="25%">three</TD>
<TD width="25%">four</TD>
</TR>
<TR onMouseOver="over()" onClick="change()" onMouseOut="out()">
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
</TR>
<TR onMouseOver="over()" onClick="change()" onMouseOut="out()">
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
</TR>
<TR onMouseOver="over()" onClick="change()" onMouseOut="out()">
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
</TR>
<TR onMouseOver="over()" onClick="change()" onMouseOut="out()">
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
</TR>
<TR onMouseOver="over()" onClick="change()" onMouseOut="out()">
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
</TR>
<TR onMouseOver="over()" onClick="change()" onMouseOut="out()">
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
</TR>
<TR onMouseOver="over()" onClick="change()" onMouseOut="out()">
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
</TR>
</TABLE>
</BODY>
</HTML>
分享到:
相关推荐
html+css+js实现表格动态增添、删除、修改;可以进行xml加载,并获取表格中内容保存为xml,双击单元格修改,表格立体美化。
html+js+css 调用jquery 工人信息管理功能(增删改查)前端实现,以及调用实现鼠标拖尾粒子效果的js库,解压文件运行src文件中的test.html即可运行
本资料无任何框架,有mysql数据库,配置运行即可! 文件包含ajaxpg.php,ajax.js,page.css,...动态数据显示在table里,有loading效果,page有css样式,可自定义样式,内有注释,大家稍稍修改可添加在个人网页系统中!!
5.2 使用JavaScript脚本控制媒体播放 141 5.3 事件监听 144 5.4 track元素 146 5.5 本章小结 149 第6章 级联样式单与CSS选择器 150 6.1 样式单概述 151 6.2 CSS样式单的基本使用 152 6.3 CSS选择器 158 6.4...
本文件包含ajaxpg.php, ajax.js, loading.gif, page.css, table.sql 未含任何框架,配置数据库运行即可!! 大家稍稍修改就可以运用在自己的网页系统中!!!
6 一、利于搜索引擎蜘蛛爬行 6 二、易于修改 7 三、减少网页加载时间 7 四、代码精简 7 五、相对表格的嵌套问题 8 六、搜索排名的影响 8 第四节 div+css布局方式 8 第五节 div+css理论概述 9 一、理解CSS盒子模型 9 ...
原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件(如:`Dreamweaver、HBuilder、Vscode 、Sublime 、 Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作) HTML静态网页设计...
2. JavaScript 的作用:实现网页上的特效效果,例如鼠标滑过弹出下拉菜单、鼠标滑过表格的背景颜色改变等。 总结: HTML、CSS 和 JavaScript 是 web 前端开发的三大基础技术,都是实现 web 前端开发所必需的。 ...
前端部分:HTML、CSS、jQuery、JavaScript等。 编码顺序 添加项目需要使用的各种jar包 HTML 页面表单的编写 Apache方法的DBUtils编写 实体类的数据初始化(添加私有变量、有参/无参构造、get/set方法、toString() ...
HTML + CSS + JavaScript JQuery Bootstrap Font-Awesome Echart MD5加密 项目特色 可以自适应的酷炫登录页面 验证码不区分大小写 页面设计合理 双层MD5加密 过滤器权限保护 MVC+DAO工厂模式,易维护易拓展便于开发 ...
原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件(如:`Dreamweaver、HBuilder、Vscode 、Sublime 、 Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作) HTML静态网页设计...
DIV 标签可以设置一个规定的属性,用于设定表格、画、字规格大小或摆放位置,在网页制作中使用,可以大大减少我们对表格、画、字等的设定工作量,大大提高我们制作网页的效率。同时,也方便我们在完成网页后对部分...
3.jquery+css实现简洁两级横向导航菜单,带动态效果 4.jQuery+CSS实现竖形动感导航菜单效果 5.jquery+div漂亮SmartMenu下拉菜单气泡透明效果 6.jQuery+div实现flash炫彩菜单插件下载 7.jquery+div实用漂亮...
文件:包含一个css样式文件、js脚本文件 功能:用来统一网站的表格样式,可设置表格样式:表头、交替行、鼠标悬浮行、鼠标点击行、如果熟悉js还可继续添加样式比如表格标题caption的样式。 //调用方法:就3步,网站...
现在要通过js对表格进行动态的增删改查(只是内存操作即可): 首先,加载页面时用js加载3条初始化记录; 有一个增加记录的按钮,点击后弹出一个div层提供输入,要求各字段必须符合输入格式且不能为空: 用户名...
很实用的动态改变表格列宽,就像Excel一样,可以自由伸缩
当鼠标经过某一格时,改革所在的震撼都会改变颜色,通过CSS结合简单的Javascript以实现,在大家设计表格时希望可以提供一点帮助
是一个很好的通过鼠标拖动表格就可以改变表格宽度的例子。是做项目的时候用到下载下来的。现在资源分0分在这里分享给大家。希望有朋友能用的到。
此代码是实现单击操作表格,用js和css 简单的实现类似于编辑器中的table