`
Army
  • 浏览: 37347 次
  • 性别: 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操作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表格无缝滚动效果

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

    js实现表格相同数据合并

    1. **获取表格数据**:使用jQuery选择器选取表格中的单元格(td)元素,然后遍历它们,获取每个单元格中的文本内容。 2. **比较相邻单元格**:比较当前单元格与前一个单元格的内容,如果相同,则进入下一步;否则,...

    js 获取表格内容

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

    自动生成表格的JS插件

    以"htable表格"为例,这是一个可能的JS插件实例,它实现了上述所有功能。开发者可以通过阅读其文档,了解如何引入和初始化这个插件,如何传递JSON数据,以及如何利用其提供的接口进行定制。在实际项目中,通过熟练...

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

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

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

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

    用js作表格的表头斜线

    在上述代码中,我们创建了一个简单的表格,其中有一个带有斜线需求的表头单元格。我们使用CSS为表头单元格添加了定位和背景颜色,并定义了一个类 `.line` 来绘制斜线。 接下来,我们将在`drawTableLine.js`中编写...

    js css精美表格

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

    js实现漂亮的table表格

    "js实现漂亮的table表格"这个主题涉及到使用JavaScript和CSS来增强HTML表格的功能和外观,使其更具吸引力并提供更好的用户体验。下面我们将详细探讨这个主题中的关键知识点。 首先,HTML表格是网页上展示结构化数据...

    js网页 表格 控件

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

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

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

    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;`或`...

    纯js电子表格操作

    "纯js电子表格操作"这个主题涉及到使用JavaScript处理电子表格数据,如读取、解析、修改和生成Excel文件。下面将详细探讨相关的知识点。 1. **js-xlsx库**: js-xlsx是JavaScript的一个开源库,专门用于处理Excel...

    JS实现可编辑的表格

    在JavaScript的世界里,实现一个可编辑的表格是一个常见的需求,特别是在构建交互性强的Web应用时。这个任务可以通过多种方式来完成,例如使用原生的HTML `&lt;table&gt;` 元素配合DOM操作,或者利用现有的库如jQuery,...

Global site tag (gtag.js) - Google Analytics