js技术之拖动table标签】的更多相关文章

一.js技术之拖动table标签 起因:前几天公司,突然安排一个任务 任务描述:要求尺码table列表要像Excel表中一样可以直接移动整行尺码到任意行位置 技术点:采用ui的sortable技术来helper进行移动 所需ui的js:<script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> 注意:这只是讲述拖动的技术点,并非整个功能,因为还有下标等缺陷未加入其中…
// 使用该保存方法,table必须外嵌一个div且不能有任何其他元素 否则ie下载会出现其他数据 //tableid , title 为文件保存的文件名 function saveCode(tableid, title) { var winname; try { if (navigator.userAgent.indexOf("MSIE") > 0) //IE浏览器 { var strHTML = $("#" + tableid).parent().html…
前言:前天刚写了篇JS组件系列——Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.博主用了半天时间研究了下,效果是出来了,但是感觉不尽如人意.先把它分享出来,以后想到更好的办法再优化吧. 一.效果展示 1.拖动前 2.拖动中 3.拖动后 4.撤销回到拖动前状态 二.需求分析 通过上篇我们知道,如果要实现拖拽,必须要有一个可以拖拽的标签,或者叫容器,比如上篇里面的tr就是一个拖拽的容器,那么如果要实现选择行的拖拽,那么博主的第一反应…
这篇文章介绍了js实现拉伸拖动iframe的具体代码,有需要的朋友可以参考一下左边iframe放树目录,右边的iframe放index页.拖鼠标同时控制2个iframe的宽高.期待有人能改进.操作方法:鼠标指到2个iframe中间,可以水平拖,纵向拖(控制高度)缺点:CSDN页面放开鼠标后才改大小,不占CPU资源. 这个是实时改大小,所以速度太慢,希望有人来改改.我是不想弄了,反正又没用什么特别的技术.提示:拖动的秘密就在filter:alpha(opacity=0)这一句 <html> &l…
为什么要把这两个标签放在一起讲? 个人认为div标签可以算是一个万能标签,它可以通过CSS(层叠样式表)来模仿表格的形式来生成一个表格.那么很多人可能会疑惑那在开发的时候,到底是用div+css的形式实现一个表格组件,还是通过table实现一个表格. 个人觉得div实现的表格不具有语义化,不利于做seo(即搜索引擎优化技术,一句话就解释就是你的seo搞的好,那么网站容易被百度,谷歌等的搜索引擎查询到,这对于产品的推广可是个不小的影响.),因此你可以这么想,如果你做的是OA系统(办公自动化系统),…
发现公司里的所有分页功能都是通过display:talbe来实现的,但是用户最近说要让表格列宽可以拖动:所有我就寻找了好多的办法:网上找了很多的资料,但是都不是我要的效果因为他们都是列宽不改变要不就是我看不懂! 我模仿网上的核心代码来自己写了一个:因为我们知道display:table标签最后再页面展示的还是table表格所以我就在页面的最后面来更改table的样式: 思路: 1,捕获鼠标移动到表格竖线上时候改变鼠标样式: 2.   在改变样式的区域里,按下鼠标就会生成辅助线来拖动:同时设置单元…
把table表格的内容导出成excel 或者word等格式(简单容易不需要太多php) 导出需注意 1. 样式都在行间,导出excel表格会继承样式包括colspan.rowspan,非表格元素,样式不会生效 2.样式非行间,导出excel之后,只有数据,不保存样式.excel不支持非表格元素的样式 原理 JS:获取表格的dom结构内容,赋值给表单,提交表单 PHP:设置请求头,获取请求的表格内容,echo输出,由于获取的表格没有table标签,输出的时候要加上,如果获取的时候有,就不需要了 注…
随着时代的变化,越来越感觉到js的重要性,js不仅可以做web页面(如Ext框架),还可以做一些web的特效,这些特效不仅兼容PC,而且兼容手机端,毕竟是基于浏览器的,和平台没关系.现在微软的windows8 系统的App都可以用js开发了,大家有时间可以去尝试一下. 现在切入正题,说一下js 实现可拖动Div.实现这个功能我们先说一下思路: 1.捕捉鼠标div的mousedown事件 2.捕捉 document的   mousemove事件 3.取消事件 然后我们看一下代码: function…
 本章案例为通过js,动态操作table,实现在单页面进行增删改查的操作. 简要案例如下: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%&…
标签云是博客的标配功能,能够清晰的呈现博客的各个关键词和主题.在这个效果中,您将学习如何使用 CSS3 技术创建一个效果精美的标签云效果. 作为实验项目,使用了 CSS3 渐变,阴影和最重要的的 CSS 变换特性. 效果演示      源码下载 您可能感兴趣的相关文章 Web 开发中很实用的10个效果[源码下载] 精心挑选的优秀jQuery Ajax分页插件和教程 12个让人惊叹的的创意的 404 错误页面设计 让网站动起来!12款优秀的 jQuery 动画插件 十分惊艳的8个 HTML5 &…