用JavaScript实现Excel表格效果

最新推荐文章于 2023-11-28 15:55:13 发布

空谷丶幽兰

最新推荐文章于 2023-11-28 15:55:13 发布

阅读量770

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/yangaoyuan1999/article/details/102986662

版权

JavaScript 专栏收录该内容

24 篇文章 1 订阅

订阅专栏

1.主要实现：

List item
输入内容时显示边框
鼠标点击文本框以外部分失去焦点

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>仿Excell表格</title>
	<style type="text/css">
        	*{
        		margin: 0;
        		padding: 0;
        	}
			.plist{
				width: 800px;
				margin: 100px auto;
				border: 1px solid #aaa;
				border-collapse: collapse;
			}
			.plist caption{
				font: 700 20px/28px "微软雅黑";
				padding: 10px;
			}
			.plist th,.plist td{
				width: 120px;
				line-height: 20px;
				font-size: 14px;
				font-family: "微软雅黑";
				border: 1px solid #aaa;
				text-align: center;
				padding: 4px;
			}
			.plist td{
				padding: 0;

			}
			.plist tr.headline{
				background-color: #379;
			}
			.plist td input{
				height: 24px;
				text-align: left;
				border: none;
				outline-style: none;
				font-size: 14px;
				border: 2px solid #fff;
			}
			.plist .alt{   /*设置鼠标点击时出现的框*/
				border: 2px solid #222;
			}
        </style>        
</head>
<body>
	<table id="price" class="plist">
    	<caption>2016电脑配件价格清单</caption>
    	<tr class="headline"><th>配件</th><th>第一季度</th><th>第二季度</th><th>第三季度</th><th>第四季度</th></tr>
    	<tr>
    		<th>CPU</th>
    		<td><input type="text" /></td>
    		<td><input type="text" /></td>
    		<td><input type="text" /></td>
    		<td><input type="text" /></td>
    	</tr>
    	<tr>
    		<th>hard disc</th>
    		<td><input type="text" /></td>
    		<td><input type="text" /></td>
    		<td><input type="text" /></td>
    		<td><input type="text" /></td>
    	</tr>
    	<tr>
    		<th>main bord</th>
    		<td><input type="text" /></td>
    		<td><input type="text" /></td>
    		<td><input type="text" /></td>
    		<td><input type="text" /></td>
    	</tr>
    	<tr>
    		<th>memory</th>
    		<td><input type="text" /></td>
    		<td><input type="text" /></td>
    		<td><input type="text" /></td>
    		<td><input type="text" /></td>
    	</tr>
    	<tr>
    		<th>mouse</th>
    		<td><input type="text" /></td>
    		<td><input type="text" /></td>
    		<td><input type="text" /></td>
    		<td><input type="text" /></td>
    	</tr>	    		
    </table>
</body>
</html>

这里是一个样式表和文本，用来生成表格，下面是js代码

<script>
       window.onload = function (){
            var Tab = document.getElementById('price');
            var Inputs = Tab.getElementsByTagName('input');
            for(var i=0; i<Inputs.length;i++){
                Inputs[i].onfocus = function (){
                   this.className = 'alt';
                }
                Inputs[i].onblur = function (){
                    this.className = '';
                }
            }

       }
  </script>

样式为：
在这里插入图片描述

空谷丶幽兰

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
用JavaScript实现Excel表格效果

1.主要实现：List item输入内容时显示边框鼠标点击文本框以外部分失去焦点<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www...
复制链接

扫一扫