添加有更换皮肤功能 没有具体验证啦 效果可以下载上传的压缩文件（我是新手 写的不好别介意啊）
<html>
<head>
<title>HTML+CSS+JS</title>
<link href="skins0.css" rel="stylesheet" type="text/css" id="cssfile"/>
<SCRIPT LANGUAGE="JavaScript">
<!--
function changestyle(index) {
var css = document.getElementById("cssfile");
css.href = "skins" + index + ".css";
}
function oneMouseOver(trElement) {
trElement.className = "oneMouseOverTR";
}
function oneMouseOut(trElement) {
trElement.className = "oneTR";
}
function twoMouseOver(trElement) {
trElement.className = "twoMouseOverTR";
}
function twoMouseOut(trElement) {
trElement.className = "twoTR";
}
//-->
</SCRIPT>
</head>
<!-- onemouseout 是当鼠标放在表格中的事件 本例中是变色
onmouseover 是当鼠标移出表格中的事件 本例中是变色
this是当前文本对象调用
onemouseout twoMouseOut twoMouseOver onmouseover 是表格随着鼠标的放置而变色
-->
<body>
<FORM METHOD="POST" ACTION="" name="form1">
<TABLE>
<CAPTION>用户注册</CAPTION>
<TR class="oneTR" onmouseout="oneMouseOut(this)" onmouseover="oneMouseOver(this)">
<TD class="leftTD">用户名：</TD>
<TD class="rightTD">
<INPUT TYPE="text" NAME="username"> *
</TD>
</TR>
<TR class="twoTR" onmouseout="twoMouseOut(this)" onmouseover="twoMouseOver(this)">
<TD class="leftTD">昵称：</TD>
<TD class="rightTD">
<INPUT TYPE="text" NAME="username1"> *
</TD>
</TR>
<TR class="oneTR" onmouseout="oneMouseOut(this)" onmouseover="oneMouseOver(this)">
<TD class="leftTD">密码：</TD>
<TD class="rightTD"><INPUT TYPE="password" NAME="password"> *
</TD>
</TR>
<TR class="twoTR" onmouseout="twoMouseOut(this)" onmouseover="twoMouseOver(this)">
<TD class="leftTD">确认密码：</TD>
<TD class="rightTD"><INPUT TYPE="password" NAME="password1"> *
</TD>
</TR>
<TR class="oneTR" onmouseout="oneMouseOut(this)" onmouseover="oneMouseOver(this)">
<TD class="leftTD">安全提示问题：</TD>
<TD class="rightTD">
<select name="prompt">
<option value="0">什么时候你最开心</option>
<option value="1">什么时候你最难受</option>
<option value="2">最喜欢的GG</option>
<option value="3">最喜欢的MM</option>
<option value="4">最喜欢看的电影</option>
<option value="5">你的梦中情人是谁</option>
</select>
</TD>
</TR>
<TR class="twoTR" onmouseout="twoMouseOut(this)" onmouseover="twoMouseOver(this)">
<TD class="leftTD">提示问题答案：</TD>
<TD class="rightTD"><INPUT TYPE="text" NAME="solution"></TD>
</TR>
<TR class="oneTR" onmouseout="oneMouseOut(this)" onmouseover="oneMouseOver(this)">
<TD class="leftTD">真实姓名：</TD>
<TD class="rightTD">
<INPUT TYPE="text" NAME="realname">
</TD>
</TR>
<TR class="twoTR" onmouseout="twoMouseOut(this)" onmouseover="twoMouseOver(this)">
<TD class="leftTD">出生日期：</TD>
<TD class="rightTD">
<INPUT TYPE="text" NAME="username">
</TD>
</TR>
<TR class="oneTR" onmouseout="oneMouseOut(this)" onmouseover="oneMouseOver(this)">
<TD class="leftTD">籍贯：</TD>
<TD class="rightTD">
<INPUT TYPE="text" NAME="nativeAddress">
</TD>
</TR>
<TR class="twoTR" onmouseout="twoMouseOut(this)" onmouseover="twoMouseOver(this)">
<TD class="leftTD">家族住址：</TD>
<TD class="rightTD">
<INPUT TYPE="text" NAME="address">
</TD>
</TR>
<TR class="oneTR" onmouseout="oneMouseOut(this)" onmouseover="oneMouseOver(this)">
<TD class="leftTD">性别：</TD>
<TD class="rightTD">
男<INPUT TYPE="radio" NAME="sex">
女<INPUT TYPE="radio" NAME="sex">
妖<INPUT TYPE="radio" NAME="sex">
</TD>
</TR>
<TR class="twoTR" onmouseout="twoMouseOut(this)" onmouseover="twoMouseOver(this)">
<TD class="leftTD">爱好：</TD>
<TD class="rightTD">
吃饭睡觉<INPUT TYPE="checkbox" NAME="beFondOf">
喝酒打屁<INPUT TYPE="checkbox" NAME="beFondOf">
数钱<INPUT TYPE="checkbox" NAME="beFondOf">
泡美女<INPUT TYPE="checkbox" NAME="beFondOf">
泡帅哥<INPUT TYPE="checkbox" NAME="beFondOf">
美女帅哥一起泡<INPUT TYPE="checkbox" NAME="beFondOf">
</TD>
</TR>
<!--更换皮肤说明：onchange事件是js中对象触发事件，这里有别于onclick
this.options[this.options.selectedIndex].value得到下拉列表中的值
-->
<TR class="oneTR" onmouseout="oneMouseOut(this)" onmouseover="oneMouseOver(this)">
<TD class="leftTD">更换皮肤：</TD>
<TD class="rightTD">
<select name="sel" onchange="changestyle(this.options[this.options.selectedIndex].value)">
<option value="0">紫色系</option>
<option value="1">蓝色系</option>
<option value="2">红色系</option>
<option value="3">黄色系</option>
<option value="4">绿色系</option>
</select>
</TD>
</TR>
<TR class="twoTR" onmouseout="twoMouseOut(this)" onmouseover="twoMouseOver(this)">
<TD class="leftTD">电子邮箱：</TD>
<TD class="rightTD">
<INPUT TYPE="text" NAME="email" size="40">
</TD>
</TR>
<TR class="oneTR" onmouseout="oneMouseOut(this)" onmouseover="oneMouseOver(this)">
<TD class="leftTD">个性签名：</TD>
<TD class="rightTD">
<textarea name="sign" rows="10" cols="50"></textarea>
</TD>
</TR>
<TR class="twoTR" onmouseout="twoMouseOut(this)" onmouseover="twoMouseOver(this)">
<TD class="leftTD">个性头像：</TD>
<TD class="rightTD">
<INPUT TYPE="file" NAME="headImg" size="40">
</TD>
</TR>
<TR class="twoTR" onmouseout="twoMouseOut(this)" onmouseover="twoMouseOver(this)">
<TD colspan="2" class="centerTD"></TD>
</TR>
<TR class="oneTR" onmouseout="oneMouseOut(this)" onmouseover="oneMouseOver(this)">
<TD colspan="2" class="centerTD">
<INPUT TYPE="button" VALUE="提交" ONCLICK="onChirm()"> <INPUT TYPE="reset">
</TD>
</TR>
</TABLE>
</FORM>
</body>
</html>
分享到：
相关推荐
《精通HTML5 + CSS3+JavaScript网页设计》内容主要包括CSS3的基本语法和概念，设置文字、段落、图片、背景、表格、表单和菜单等网页元素的方法，以及CSS3滤镜的应用。重点介绍如何使用DlV+CSS3进行网页布局，注重...
本文实例讲述了jQuery+CSS实现的table表格行列转置功能。分享给大家供大家参考，具体如下： 先来看看运行效果： 具体代码如下： <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN ...
第1章 HTML5概述 1.l HTML5的基本概念 1.1.1 HTML 5简介 1.1.2 THML 5文件的基本...第17章 HTML5、CSS3和Java Script 第18章 HTML5绘制图形 第19章 HTML5中的音频和视频 第20章 地理定位、离线Wed应用和Web存储
<link type="text/css" rel="stylesheet" href="css/jquery-ui-1.9.2.custom.min.css"> <link type="text/css" rel="stylesheet" href="css/ui.jqgrid.css"> <link rel="stylesheet" type="text/css" media="screen...
4、表格标签 ** 技巧：数里面有多少行，每行里面有多少个单元格 ** <table></table> <tr> <td> 5、表单标签 ** <form></form> - action method enctype - method: get post ** 输入项 *** 有...
Google Apps Script、HTML 和 CSS 中的小型实现，它使用 Google 电子表格作为动态数据源。 这旨在自动化数字媒体活动报告。 如果有人想使用它，我建议在“超级指标中的查询”表中对查询进行编程，提供以灰色突出显示...
a-table.js 用于生成表格html的简单表格用户界面安装npm npm install a-table 独立的< script src =" https://unpkg.com/a-table@1.4.10/build/a-table.min.js " > </ script >CSS < link rel =" ...
您HTML表是可导航和可编辑的（例如电子表格）。 。 （pt）简单，容易反汇编。 Suas tabelas HTMLserãonavegáveiseeditáveis（como uma planilha）。 。 简单的例子： < html > < head > < ...
查看一个简单的演示 [这里] ( )。 第一步：下载responsive-tables.js和responsive-tables.css 第 2 步：将这些文件添加到您的 html 文档中 注意：在jQuery之后添加responsive-tables.js 文件。 < head > ....
关键代码如下： 需要引入的css和js文件有： 代码如下: <link rel=”stylesheet” type=”text/css” href=”<%=basePath %>css/theme/default/css/...script language=”javascript” type=”text/javasc
本文实例讲述了AngularJS表格样式简单设置方法。分享给大家供大家参考，具体如下： 1、问题背景 AngularJS表格table，利用样式设置表格间隔色 2、实现源码 <!DOCTYPE html> <html> <head> <...
html2ps能够把带有图片，复杂表格(包含rowspan/colspan) ，layer/div和 css样式的HTML转换成Postscript与PDF。html2ps对CSS2.1支持非常好，并且很好地兼容不正确的HMTL。它甚至能够转换几 乎是采用CSS设计的网站如...
本文实例为大家分享了layui使用数据表格实现购物车功能的具体代码，供大家参考，具体内容如下 html部分 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>...
用<script></script>标签包围，这里面的代码如同java里面的代码一样有操作性 这里面的数据是弱数据类型 有顺序结构、循环结构、条件结构 还可以写函数，外还可以写拼接，点击按钮给表格加一行 BOM和DOM内置元素 ...
本文实例讲述了AngularJS表格添加序号的方法。分享给大家供大家参考，具体如下： ...link rel="stylesheet" href="css/bootstrap.css" rel="external nofollow" /> <script src="angular.js/1.4.6/angu
<link type="text/css" rel="stylesheet" href="/Data/ueditor/third-party/video-js/video-js.css"/> <script language="javascript" type="text/javascript" src="/Data/ueditor/third-party/video-js/video.js...
<script src="Script/jquery-1.4.1.min.js" src="Script/jquery-1.4.1.min.js" type="text/javascript"></script> <script src="Script/jquery.pagination.js" mce_src="Script/jquery.pagination.js" type="text/...