JS+CSS实现可以凹陷显示选中单元格的方法

本文实例讲述了JS+CSS实现可以凹陷显示选中单元格的方法。分享给大家供大家参考。具体实现方法如下：

代码如下:

<html>
<head>
<title>JS+CSS实现可以凹陷显示选中的单元格</title>
<style>
td{cursor:hand;font-size:12px}
.click{border-top:1px solid #0033CC;border-bottom:1px solid #DDEEFF;border-left:1px solid #0033CC;border-right:1px solid #DDEEFF;padding-top:5px;padding-bottom:3px;padding-left:5px;padding-right:3px;}
.hover{border-top:1px solid #DDEEFF;border-bottom:1px solid #0033CC;border-left:1px solid #DDEEFF;border-right:1px solid #0033CC;padding:4px;}
.normal{border:1px solid #FFFFFF;padding:4px;}
</style>
</head>
<body>
<script>
function overbutton(){
 if(src=event.srcElement)
  if(src.className=="normal"){
   src.className='hover';
  }
}
function outbutton(){
 if(src=event.srcElement)
  if(src.className=="hover"){
   src.className='normal';
  }
}
function clickbutton(){
 if(src=event.srcElement)
  if(src.className=="hover"){
      var cells=document.all.button.rows[0].cells;
   for (i=0;i<cells.length ;i++ )
   {cells[i].className="normal";
   }
   src.className='click';
  }
}

document.onmouseover=overbutton
document.onmouseout=outbutton
document.onclick=clickbutton</script>
<TABLE id=button>
<TR>
 <TD class=click>日报</TD>
 <TD class=normal>周报</TD>
 <TD class=normal>月报</TD>
 <TD class=normal>季报</TD>
 <TD class=normal>日报</TD>
 <TD class=normal>周报</TD>
 <TD class=normal>月报</TD>
 <TD class=normal>季报</TD>
</TR>
</TABLE>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

赞 (0)

相关推荐

  • js实现将选中值累加到文本框的方法

    js实现将选中值累加到文本框的方法

    本文实例讲述了js实现将选中值累加到文本框的方法.分享给大家供大家参考.具体如下: 这里实现JavaScript将列表框或单选框选中的值累计加入到文本框中,在一些表单中,我们经常会看到这种功能,可以免去用户输入的麻烦,提升用户体验.变通一下,你还可以做出更多的类似功能来. 运行效果截图如下: 具体代码如下: <html> <head> <title>js将选中值添加到文本框</title> <SCRIPT LANGUAGE="JavaScri

  • js使用for循环与innerHTML获取选中tr下td值

    function getParentEl (el, tagName) { if (!el) return el; do { el = el.parentNode; } while(el && el.tagName !== tagName); return el; } function temp(){ //得到选中row的value值 var temp=document.getElementsByName('id'); for(var i=0;i<temp.length;i++){ i

  • js实现选中复选框文字变色的方法

    js实现选中复选框文字变色的方法

    本文实例讲述了js实现选中复选框文字变色的方法.分享给大家供大家参考.具体如下: 这里实现选中复选框时,文字加上一个背景色,变通一下,还是很有用的. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/js-checkbox-cha-font-color-codes/ 具体代码如下: <html> <head> <title>选中复选框文字变色</title> <style> .checkbox {

  • js树插件zTree获取所有选中节点数据的方法

    本文实例讲述了js树插件zTree获取所有选中节点数据的方法.分享给大家供大家参考.具体分析如下: 由于刚接触Tree方面的东西.在网上看到了zTree,是中国人写的.所以API肯定是中文的.而且评论也很好.所以尝试用zTree在项目中.这个获取所有选中节点数据很简单.看一下API就能看懂了.所以我就直接上代码了. 复制代码 代码如下: <!DOCTYPE html> <HTML> <HEAD>     <TITLE> ZTREE DEMO - Standa

  • js实现鼠标点击文本框自动选中内容的方法

    js实现鼠标点击文本框自动选中内容的方法

    本文实例讲述了js实现鼠标点击文本框自动选中内容的方法.分享给大家供大家参考.具体如下: 这里使用JS实现鼠标点击时自动选中文本框文本的效果,相信许多朋友都遇到这种功能的,就是当我们点击文本框的时候,文本框中默认的文字会被全部选中,这样当你输入的时候不用再去选择,省去了一些麻烦,提高了输入效率,用户肯定会喜欢这功能,那么实现的方法是怎么样呢?通过本代码你就搞明白了. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/js-mouse-click

  • js获取checkbox复选框选中的选项实例

    有关javascript 获取checkbox复选框的实例数不胜数. js实现: var form = document.getElementById("form2"); var field = form.elements["test2"]; var option = Dining.getSelectedOption(form, field); var message = ""; for (var i = 0, len = option.leng

  • js单独获取一个checkbox看其是否被选中

    <script language=javascript> function check(){ var xz=document.getElementById("xz"); alert(xz.checked); } </script> <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <inpu

  • js下拉选择框与输入框联动实现添加选中值到输入框的方法

    js下拉选择框与输入框联动实现添加选中值到输入框的方法

    本文实例讲述了js下拉选择框与输入框联动实现添加选中值到输入框的方法.分享给大家供大家参考.具体如下: 这里演示js下拉选择框与输入框联动,直接添加选中值到输入框中的效果.这种效果相信不少朋友见到过吧,省去用户输入的麻烦,这里使用JS直接将值赋予输入框,了解原理之后,可灵活运用,扩展出更多的特效来. 运行截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-select-value-to-input-codes/ 具体代码如下: <html> <

  • js实现文本框选中的方法

    本文实例讲述了js实现文本框选中的方法.分享给大家供大家参考.具体如下: 这段javascript代码可解决文本框获得焦点,即使得文本框的内容被选中. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www

  • js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色

    后台代码 复制代码 代码如下: /// <summary> /// 数据行绑定事件 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> protected void gvProduct_RowDataBound(object sender, GridViewRowEventArgs e) {

  • JS实现表单中checkbox对勾选中增加边框显示效果

    JS实现表单中checkbox对勾选中增加边框显示效果

    本文实例讲述了JS实现表单中checkbox对勾选中增加边框显示效果.分享给大家供大家参考.具体如下: 这里用JavaScript实现checkbox复选框选中效果,表单中的复选框效果,打对勾选中效果模拟,JS与HTML5相结合实现的美化效果.貌似目前比较流行的效果啦! 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-table-checkbox-check-border-show-codes/ 具体代码如下: <!doctype html

随机推荐