`
Army
  • 浏览: 37678 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

尝试写了个表格装饰jstd

阅读更多
预览效果:
jstd 0.8beta:http://army.512j.com/temp/table.html
jstd 0.9alpha:http://army.512j.com/temp/table2.html

尝试写着玩儿的,也算锻炼一下吧~
使用方法:先引入jstd.js文件,当然最好是在head部分了。然后在要装饰的table后面(建议body末尾)加上一句:
<script type="text/javascript">
jstd.exec(id);
</script>
id就是要装饰表格的id。

0.8目前实现了排序、自定义着色(高亮),改变列宽、双击隐藏列功能。

自定义着色方面通过color属性来,用数学上的区间来表示。比如(1,10]:#f33就是说这一列单元格的内容中如果在1和10之间(不包括1但包括10,开闭区间的不同)就着上#f33的颜色。

排序和着色种类则是通过命名name属性来,比如int、num、string、date、price等等。

代码写得很乱,很多地方还要改,先搞定功能后全面优化……

今天下午尝试0.9加入拖动改变列序的时候遇到问题了,头疼好久也没搞定……只要和隐藏列混到一起就会出现问题,调试的我头都大了,虽然知道完全归于自己开始设计上的失误,也知道问题出的方向所在,可就是改不好它。都准备放弃这一功能,在jstd2里再重新设计引入了……果然还是太年轻,经验不足啊……

另外在0.9页面里我把那几个表头上附着的红色div给显示出来了,这就是列宽和列序拖动的关键所在:每个th后面通过计算附加一个小div来实现拖拽,从而原有的table的dom没有任何改变。

写得不是很好,提点意见吧……
分享到:
评论

相关推荐

    表格-js特效-菜单样式

    "表格-js特效-菜单样式"这个主题涉及到的是如何使用JavaScript技术来增强网页中的表格和菜单的交互效果和视觉表现。下面我们将深入探讨这个话题。 首先,表格在网页中用于展示结构化的数据,如数据库查询结果、...

    JS操作Word生成表格

    在IT行业中,JavaScript(简称JS)通常用于网页前端交互,但通过特定的库和API,我们也能使用JS来操作Microsoft Word文档,包括在Word中创建和编辑表格。本篇文章将详细探讨如何使用JS来实现这一功能,以及相关的...

    处理金额js;表格样式js

    表格样式js"涉及到两个关键知识点:金额格式化处理和表格样式的JavaScript实现。 首先,我们来看“处理金额js”。在前端开发中,用户交互的数据往往包括货币金额,而这些金额通常需要进行格式化以便于阅读。`money-...

    表格样式 CSS JS

    - **布局调整**:通过`display`属性,可以将表格单元格(`td`)或表头单元格(`th`)设置为块级元素,实现单元格的并排显示。 - **单元格间距**:`cellspacing`和`cellpadding`属性控制单元格间的距离,但CSS中也可以用`...

    js 实现表格中动态添加文本框

    js 实现表格中动态添加文本框 及下及用,童叟无欺。

    js表格无缝滚动效果

    为了提供更好的用户体验,可以采用JavaScript(js)来实现表格的无缝滚动效果,让表格像一个无边界的容器一样平滑滚动。这种效果在大数据量的展示或者长表格中尤其有用,它能让用户更容易地浏览和查找信息。 首先,...

    js自动生成表格

    `jQuery`作为一个广泛使用的JavaScript库,提供了许多方便的功能,而`Table.js`就是这样一个专为生成动态表格设计的插件。这个插件使得开发者无需编写复杂的HTML代码,就能轻松创建出功能丰富的表格。 `Table.js`的...

    js实现漂亮的table表格

    本教程将详细介绍如何利用JavaScript (JS) 和 Cascading Style Sheets (CSS) 技术来创建一个漂亮且实用的table表格。 **一、HTML基础表格结构** 首先,我们需要在HTML文档中创建基本的表格结构。一个简单的表格由`...

    js 获取表格内容

    - 使用上述方法创建一个简单的表格,尝试获取其中的数据并显示出来。 - 探索更多有关`table`元素的属性和方法,以便更灵活地处理表格数据。 - 尝试结合其他JavaScript库(如jQuery)来简化表格数据的操作。 以上...

    js table 表格 复杂表格 多维展示 多维表格【idosoft原创】

    经过研究,发布我的复杂表格、多维展示的成果,如图: 下面是源码(copy and paste,run 看效果): 访问链接: http://www.idosoft.com.cn/javatech/11.html

    JS树形表格(可分级展开)

    otreetable.js 原生JS树形表格,调用非常简单(只需一句代码即可调用),获取HTML中输出的表格数据重构表格,以树形方式显示,可展开/收缩,不破坏表格原有数据格式及内容,支持无限级,兼容所有浏览器。当前版本...

    js css精美表格

    例如,`jquery.tablesorter.js`是一个jQuery插件,它允许用户对表格数据进行动态排序,只需点击表头即可改变数据排列顺序,提高了用户体验。 3. jQuery库:`jquery-latest.js`是jQuery库的最新版本,这是一个广泛...

    js网页 表格 控件

    "js网页 表格 控件"这个主题聚焦于如何使用JavaScript技术来增强网页表格的功能性和视觉效果。JavaScript是一种广泛应用于客户端Web开发的脚本语言,它允许我们在用户与网页交互时动态更新内容,提供更加丰富的用户...

    js超简洁表格

    总结来说,"js超简洁表格"是一个关注于如何用最少的代码和资源实现高效表格显示和交互的技术。它强调的是代码的简洁性、性能以及用户体验。通过对"A-table"文件的学习和实践,开发者可以提升在JavaScript表格处理...

    任意改变table表格td的宽度 支持表格TD拖拽

    1. **事件监听**:首先,我们需要在表格的每个td元素上添加鼠标事件监听器,如`mousedown`、`mousemove`和`mouseup`,分别对应拖拽开始、拖拽过程和拖拽结束。 2. **计算初始位置**:当用户按下鼠标时,记录下当前...

    js导出html表格中数据示例

    为了将数据导出到Excel,我们通常会创建一个CSV(逗号分隔值)文件,因为这种格式可以被大多数电子表格软件识别。可以通过以下方式生成CSV字符串: ```javascript let csv = ''; for (let i = 0; i ; i++) { for ...

    js生成动态表格并为每个单元格添加单击事件的方法

    在提供的代码片段中,使用了`getElementById`方法来获取页面上的表格元素,然后通过`document.createElement`方法来动态创建`&lt;tr&gt;`(表格行)和`&lt;td&gt;`(表格单元格)。通过循环的方式为每一行和每一列创建相应的元素...

    表格行列合并JS

    //函数说明:合并指定表格(表格id为_w_table_id)指定列(列数为_w_table_colnum)的相同文本的相邻单元格 //参数说明:_w_table_id 为需要进行合并单元格的表格的id。如在HTMl中指定表格 id="data" ,此参数应为 #...

    js简单表格操作

    一个简单的表格通常由`&lt;table&gt;`标签开始,`&lt;tr&gt;`代表行,`&lt;th&gt;`为表头单元格,`&lt;td&gt;`为数据单元格。例如: ```html 姓名 年龄 &lt;td&gt;张三&lt;/td&gt; &lt;td&gt;25&lt;/td&gt; ``` 接下来,我们将探讨如何用JS来操作这些...

    js获取表格内容

    ### JS获取表格内容知识点 #### 一、基本概念与语法 在JavaScript中,获取HTML表格内容是一项常见的操作,尤其在处理动态数据时尤为重要。通过JavaScript,我们能够读取表格中的行(`&lt;tr&gt;`)、单元格(`&lt;td&gt;`或`...

Global site tag (gtag.js) - Google Analytics