JS+CSS的table表格特效资源-CSDN文库

共6个文件

gif：2个

rar：1个

css：1个

JS+CSS的table表格特效

复选框全选

表格加滚动条

点击行变色

点击行选中复选框

4星 · 超过85%的资源需积分: 25 169 浏览量 2011-10-15 01:39:23 上传评论收藏 749KB RAR 举报

在网页设计中，表格是一种常见的数据展示方式，用于排列和组织结构化信息。"JS+CSS的table表格特效"是一个利用JavaScript（JS）和层叠样式表（CSS）来增强HTML表格功能的例子，旨在提高用户体验并增加交互性。在这个项目中，我们可以看到几个关键的技术点： 1. **复选框全选**：这是表格中常用的一个功能，允许用户通过一个主复选框一次性选中或取消选中所有子复选框。这个功能通常通过JavaScript实现，监听主复选框的`change`事件，然后遍历所有子复选框，根据主复选框的状态来设置它们的选中状态。 2. **表格加滚动条**：当表格内容过多无法完全显示时，可以添加滚动条。在CSS中，可以使用`overflow`属性来控制元素的内容是否应该显示滚动条。例如，对于水平滚动条，可以设置`overflow-x: auto;`，对于垂直滚动条，可以设置`overflow-y: auto;`。 3. **点击行变色**：这个特性增强了用户交互，当用户点击表格的某一行时，该行会改变颜色，以突出显示当前选择。这通常通过JavaScript监听表格行的`click`事件，并修改行的CSS类来实现，如添加一个表示选中状态的类，该类定义了被选中时的背景色。 4. **点击行选中复选框**：与点击行变色类似，但这个功能还会同步选中对应的复选框。这可能需要在JavaScript中同时处理行的点击事件和复选框的选中状态。通常，我们可以通过获取点击行的索引，找到对应的复选框并设置其`checked`属性。 5. **CSS样式表**：在`table_css.css`文件中，包含了定义表格外观的CSS规则。这些规则可能包括表格的边框、单元格的间距、字体样式、背景图片（如`bg2.gif`和`bg.gif`）等。CSS允许开发者自定义表格的每一个细节，使其符合网站的整体设计风格。 6. **JavaScript脚本**：`table_js.js`是实现上述交互功能的JavaScript代码库。它可能包含了对DOM操作、事件监听、数据处理等相关函数。例如，可能会有用于全选/全不选的`selectAll()`和`deselectAll()`函数，以及处理行点击的`handleRowClick()`函数等。 7. **PHP加密工具**：虽然这个项目主要涉及JS和CSS，但压缩包中包含了一个名为`PHP加密工具.rar`的文件，这可能是为了保护源代码不被轻易查看或修改，使用了PHP的加密工具对JavaScript或CSS文件进行了加密。这通常是开发者的版权保护措施，但解密和使用这样的文件可能需要特定的工具或知识。这个项目展示了如何结合JS和CSS来提升HTML表格的交互性和视觉效果，提供了一种实用的方法来增强网页的用户体验。通过学习和应用这些技术，开发者可以创建更生动、更具吸引力的数据展示界面。

展开

资源推荐

资源详情

资源评论

收起资源包目录

超好用JS+CSS的 table表格特效.rar （6个子文件）

bg.gif 149B

index.html 3KB

bg2.gif 258B

table_js.js 5KB

PHP加密工具.rar 745KB

table_css.css 4KB

      
<html>
<head>
<link rel="stylesheet" href="table_css.css" type="text/css" />
<script src="table_js.js"></script>
<title>表格</title>
</head>
<body ondragstart=window.event.returnValue=false onkeyup=window.event.returnValue=false topMargin=0 >
<br>
<!--Div 控制 整个 table ,高度,宽度必须要-->
<div class="DivContainer" align="center" style="width: 50%; height: 20%;border: solid 1px ; color: #999999;">

<table  width="100%" class="table1" id="table1">
  <tr id="top_tr">
    <td width="22" style="width:22px;" class="Locked"> <input name="ck_all" type="checkbox" id="ck_all" onClick="ck_xz('table1','','#bce774')"></td>
    <td width="35" align="center" class="VLocked" style="width:35px;">序号</td>
    <td width="125" align="center" class="VLocked">名称</td>
    <td width="71" align="center" class="VLocked">单价</td>
    <td width="63" align="center" class="VLocked">数量</td>
    </tr>
<tr id="qt_tr">
<td width="22" align="center" ><input name="ck_name1" type="checkbox" id="id" value="value1"/></td>
<td width="35" align="center" >1</td>
<td width="125" align="center" >名称1</td>
<td width="71" align="center" >单价1</td>
<td width="63" align="center" >数量1</td>
</tr>

<tr id="qt_tr">
<td width="22" align="center" ><input name="ck_name2" type="checkbox" id="id" value="value2"/></td>
<td width="35" align="center" >2</td>
<td width="125" align="center" >名称2</td>
<td width="71" align="center" >单价2</td>
<td width="63" align="center" >数量2</td>
</tr>

<tr id="qt_tr">
<td width="22" align="center" ><input name="ck_name3" type="checkbox" id="id" value="value3"/></td>
<td width="35" align="center" >3</td>
<td width="125" align="center" >名称3</td>
<td width="71" align="center" >单价3</td>
<td width="63" align="center" >数量3</td>
</tr>

<tr id="qt_tr">
<td width="22" align="center" ><input name="ck_name4" type="checkbox" id="id" value="value4"/></td>
<td width="35" align="center" >4</td>
<td width="125" align="center" >名称4</td>
<td width="71" align="center" >单价4</td>
<td width="63" align="center" >数量4</td>
</tr>

<tr id="qt_tr">
<td width="22" align="center" ><input name="ck_name5" type="checkbox" id="id" value="value5"/></td>
<td width="35" align="center" >5</td>
<td width="125" align="center" >名称5</td>
<td width="71" align="center" >单价5</td>
<td width="63" align="center" >数量5</td>
</tr>

<tr id="qt_tr">
<td width="22" align="center" ><input name="ck_name6" type="checkbox" id="id" value="value6"/></td>
<td width="35" align="center" >6</td>
<td width="125" align="center" >名称6</td>
<td width="71" align="center" >单价6</td>
<td width="63" align="center" >数量6</td>
</tr>

<tr id="qt_tr">
<td width="22" align="center" ><input name="ck_name7" type="checkbox" id="id" value="value7"/></td>
<td width="35" align="center" >7</td>
<td width="125" align="center" >名称7</td>
<td width="71" align="center" >单价7</td>
<td width="63" align="center" >数量7</td>
</tr>
</table>
<script language="javascript">senfe("table1","","","#EEEEEE","#bce774");//senfe("表格名称","奇数行背景","鼠标离开后行色","鼠标经过背景","点击后背景");</script>
</div>
</body>
</html>