- 浏览: 315111 次
- 性别:
文章分类
最新评论
-
i042416:
分析在哪?
angular分析 -
何盆盆:
你好,请问您这是Extjs3还是Extjs4
ExtJs源码分析与学习—ExtJs事件机制(一) -
124753561:
引用引用引用引用引用[u][u][u][u][i][i][i] ...
Subvision SVN 服务端与客户端的安装 -
谷超:
请问一下例子中itext是什么版本的?
利用iText生成word文档例子参考 -
geosmart:
正好要用到执行字符串中方法,学习了
java中利用反射机制实现调用给定为字符串的方法名
以下是简单的实现了table标签单行、多行的选择。建议用ext来实现该功能,美观和效果比这个好。
如果不用ext的话,以下的功能完全可以满足table多行选择的需求
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>table列表中结合ctrl,shift实现多行的选择</title> <style type="text/css"> TABLE{ FONT-SIZE: 9pt; background-color: #D9E5A9; } TABLE.list{ BORDER-BOTTOM: 1 none; BORDER-LEFT: 1 none; BORDER-RIGHT: 1 none; BORDER-TOP: 1 none; FONT: messagebox; overflow: hidden FONT-SIZE: 9pt; } TABLE.list TR.first{ BACKGROUND-COLOR: rgb(255,255,255); COLOR: black; FONT: messagebox; cursor:pointer; FONT-SIZE: 9pt; } TABLE.list TR.second{ BACKGROUND-COLOR: rgb(240,240,240); COLOR: black; FONT: messagebox; cursor:pointer; } TABLE.list TR.mouseover{ BACKGROUND-COLOR: #D7DAFF; cursor:pointer; } TABLE.list TR.selected{ BACKGROUND-COLOR: royalblue; COLOR: white; FONT: messagebox; cursor:pointer; } </style> <script> var ctrl = false; var shift = false; var tableStyle;//存放table各列的样式 var ifFirst=true;//用来第一次初始化table各列的样式 var selectNum=0;//选择行的个数,用来判断选中行的个数 var rowI;//当前行序号 var selectElement;//选择行对象 //处理按ctrl和shift键 document.onkeydown = function () { if (event.keyCode == 17) { ctrl = true; } else { if (event.keyCode == 16) { shift = true; } } }; document.onkeyup = function () { ctrl = false; shift = false; }; //鼠标经过时 function hilite(theTR){ //鼠标第一次经过时初始化 if(ifFirst){ //遍历table所有行的样式,并放到数组tableStyle中,第一次点击的时候遍历 tableStyle=new Array(infoTable.rows.length); for (var i = 0; i < infoTable.rows.length; i++) { tableStyle[i]=infoTable.rows(i).className; } ifFirst=false; } if(theTR.className != "selected"){ theTR.className = "mouseover"; } } //鼠标离开时 function restore(theTR){ if(theTR.className != "selected") theTR.className = tableStyle[theTR.rowIndex] } //鼠标按下时 //每行中selectState属性可以在需要的时候判断是否选中某一行或某几行 function clickRow(theTR) { if (ctrl && shift) {//同时按下ctrl和shift则不操作 return; } rowI=theTR.rowIndex; //如果选择的是复选框按钮时 if(event.srcElement.tagName=="INPUT" && event.srcElement.type=="checkbox" &&!shift ){ var state = event.srcElement.checked; if(state){ infoTable.rows(rowI).className = "selected"; infoTable.rows(rowI).selectState = "yes"; selectNum++; }else{ infoTable.rows(rowI).className = tableStyle[rowI]; infoTable.rows(rowI).selectState = "no"; selectNum--; } for (var i = 1; i < infoTable.rows.length; i++) { if(infoTable.rows(i).selectState == "yes"){ //赋当前操作行对象 selectElement=infoTable.rows(i); } } return; } if (!ctrl && !shift) {//没有按ctrl或shift时 for (var i = 1; i < infoTable.rows.length; i++) { try { infoTable.rows(i).cells(0).firstChild.checked = false; } catch (e) { //页面中没有复选框或单选框时 } infoTable.rows(i).className = tableStyle[i]; infoTable.rows(i).selectState = "no"; } try { infoTable.rows(rowI).cells(0).firstChild.checked = true; } catch (e) { //页面中没有复选框或单选框时 } infoTable.rows(rowI).className = "selected"; infoTable.rows(rowI).selectState = "yes"; infoTable.currentRow = rowI; selectNum=1; } if (ctrl) {//按ctrl键时 if(infoTable.rows(rowI).className == "selected"){ try { infoTable.rows(rowI).cells(0).firstChild.checked = false; } catch (e) { //页面中没有复选框或单选框时 } infoTable.rows(rowI).className = tableStyle[rowI]; infoTable.rows(rowI).selectState = "no"; selectNum--; }else{ try { infoTable.rows(rowI).cells(0).firstChild.checked = true; } catch (e) { //页面中没有复选框或单选框时 } infoTable.rows(rowI).className = "selected"; infoTable.rows(rowI).selectState = "yes"; selectNum++; } } if (shift) {//按shift键时 for (var i = 1; i < infoTable.rows.length; i++) { try { infoTable.rows(i).cells(0).firstChild.checked = false; } catch (e) { //页面中没有复选框或单选框时 } infoTable.rows(i).className = tableStyle[i]; infoTable.rows(rowI).selectState = "no"; } if (rowI < infoTable.currentRow) { for (var i = rowI; i <= infoTable.currentRow; i++) { try { infoTable.rows(parseInt(i)).cells(0).firstChild.checked = true; } catch (e) { //页面中没有复选框或单选框时 } infoTable.rows(parseInt(i)).className = "selected"; infoTable.rows(parseInt(i)).selectState = "yes"; } } else { for (var i = infoTable.currentRow; i <= rowI; i++) { try { infoTable.rows(parseInt(i)).cells(0).firstChild.checked = true; } catch (e) { //页面中没有复选框或单选框时 } infoTable.rows(parseInt(i)).className = "selected"; infoTable.rows(parseInt(i)).selectState = "yes"; } } selectNum=Math.abs(parseInt(infoTable.currentRow)-rowI)+1; } for (var i = 1; i < infoTable.rows.length; i++) { if(infoTable.rows(i).selectState == "yes"){ //赋当前操作行对象 selectElement=infoTable.rows(i); } } } </script> </head> <body> 利用ctrl 和shift实现了table标签的多行选择,该实现可以根据需求添加需要实现功能的脚本,<br/> 如判断是否选择了行,选择了多行等。这里省略 <br/><br/> <table width="400" border="0" cellspacing="1" cellpadding="3" currentRow="1" id="infoTable" bgcolor="#cccccc" class="list"> <tr> <th colspan="2" align="center">标题</th> </tr> <tr selectState="no" class="second" onMouseover="hilite(this)" onMouseout="restore(this)" onclick="clickRow(this)"> <td> <input type=checkbox checked> </td> <td> </td> </tr> <tr selectState="no" class="first" onMouseover="hilite(this)" onMouseout="restore(this)" onclick="clickRow(this)"> <td> <input type=checkbox> </td> <td> </td> </tr> <tr selectState="no" class="second" onMouseover="hilite(this)" onMouseout="restore(this)" onclick="clickRow(this)"> <td> <input type=checkbox> </td> <td> </td> </tr> <tr selectState="no" class="first" onMouseover="hilite(this)" onMouseout="restore(this)" onclick="clickRow(this)"> <td> <input type=checkbox> </td> <td> </td> </tr> <tr selectState="no" class="second" onMouseover="hilite(this)" onMouseout="restore(this)" onclick="clickRow(this)"> <td> <input type=checkbox> </td> <td> </td> </tr> <tr selectState="no" class="first" onMouseover="hilite(this)" onMouseout="restore(this)" onclick="clickRow(this)"> <td> <input type=checkbox> </td> <td> </td> </tr> <tr selectState="no" class="second" onMouseover="hilite(this)" onMouseout="restore(this)" onclick="clickRow(this)"> <td> <input type=checkbox> </td> <td> </td> </tr> <tr selectState="no" class="first" onMouseover="hilite(this)" onMouseout="restore(this)" onclick="clickRow(this)"> <td> <input type=checkbox> </td> <td> </td> </tr> </table> </body> </html>
发表评论
-
angular分析
2014-07-08 13:49 985angular分析 -
键盘KeyCode值列表
2012-08-28 18:13 1045keycode 0 = keycode 1 = k ... -
JavaScript中的delete操作符
2012-04-20 14:17 1437主要从以下几个方面说 ... -
javascript性能优化之一
2012-04-04 21:01 0该篇文章转自 http://blog.sina.com.cn ... -
DOM节点中属性nodeName、nodeType和nodeValue的区别
2012-03-20 17:31 3683(一)nodeName 属性含有某个节点的名称。 元素节 ... -
javascript正则表达式总结
2012-03-16 13:53 1433正则表达式中特殊字符的含义 1、^ ^匹配输入字符串 ... -
javascript常用知识点总结(不断完善)
2011-07-04 17:15 1132一、函数中调用函数的实现 /** * 以下为 ... -
js对象的克隆
2011-06-14 15:02 2058由于js是采用引用传值的,故修改任何一个对象,其关 ... -
javascript中静态方法、实例方法、内部方法和原型的一点见解
2011-06-11 15:54 85471、静态方法的定义 var BaseClass = f ... -
javascript contains和compareDocumentPosition 方法来确定是否HTML节点
2011-03-30 17:41 14481、DOMElement.contains(DOMNode) ... -
事件mouseenter和事件mouseleave
2011-03-14 14:52 1784为了鼠标操作起来方便,IE实现了mouseenter 和m ... -
浏览器事件机制与自定义事件的实现
2011-03-14 14:03 3986一、 0 级 DOM 上的事件 ... -
JavaScript中Array(数组)的属性和方法
2009-06-03 17:13 1366数组有四种定义的方式 ... -
表格自动换行
2008-12-02 11:06 3002有时表格中显示的内容不会根据长度的加长而自动换行,显示的效果很 ... -
让表格有滚动条的实现
2008-12-02 10:23 5592主要是用div样式来控制 例如 <html> ... -
利用javascript验证输入框中的值是否为日期格式
2008-09-02 15:45 127501、判断是否为年月日时间格式 <script> ... -
web一些值得珍藏的脚本代码
2008-08-01 09:50 12811. oncontextmenu="window.e ... -
div垂直和水平居中
2008-06-29 16:34 1704<div id="div_1" st ... -
JS创建日历控件
2008-06-29 16:32 1790// JavaScript Document /******* ... -
JS获取系统当前日期和时间
2008-06-29 16:31 6689<!DOCTYPE HTML PUBLIC " ...
相关推荐
table客户端排序 ctrl shift 连选实例 连选偶自己写的
实现全选,反选,按住shift键实现多项连续选择
Html结合css与jquery实现文本框输入数字自动添加table列表
ADF实现多选框及分页的Table组件,提供例如上一页,下一页,首页,尾页,以及页码下拉菜单来实现数据分页显示
在af:table中选择某一行可以使用鼠标单击该行实现,如果需要选择多行则需要按住ctrl或者shift键来实现,并且af:table还支持快捷键ctrl+A的全选。从功能上来讲af:table已经实现了绝大多数的对表格数据进行浏览和编辑...
基于bootstrap-table 实现 右侧列固定,也可以针对左侧列固定,针对操作列使用起来非常方便,引用jquery、bootstrap-table-fixed 样式和js文件后,可以随意设置,灵活。 fixedColumns: true,//fixedtNumber:2, //...
Flutter实现Table跨行跨列
主要介绍了BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤,需要的朋友可以参考下
aspose.words 控件可以方便的出来word文档,通过在word模板中定义书签,可以在指定的位置插入内容,如果需要在word中插入表格,并且表格中含有多行行头,需要合并单元时,就稍微麻烦一些,必须要注意设置单元格的...
el-table实现选择列显示.zip
好看的css table列表样式
如果要实现拖拽,必须要有一个可以拖拽的标签,或者叫容器,比如上篇里面的tr就是一个拖拽的容器,那么如果要实现选择行的拖拽,那么博主的第一反应是将选中的行放到一个容器里面,比如放到一个div中,然后注册这个...
angularCtrlShiftSelect 是一组轻量级且简单的指令,它允许您使用鼠标左键单击和 CTRL 和 SHIFT 来选择多个项目,就像您习惯于从桌面应用程序中一样。 安装 下载最新的脚本文件 - 在您的网页中包含脚本 用法 在您...
在table中插入多行,能使用与insertAdjacentHTML相似的功能
swt table 实现换行
table的实现,如何实现table,往table里面添加数据
一个适用于渲染table格式的多行form表单组件
支持头部列合并,并且可动态添加头部列,可支持多行title的bootstrap-table插件。 在原来的bootstrap-table中进行了改进,并增加回调函数
本人小白一名,第一次学习react ,该资料为本人原创,采用的是react+ant design的Tabled的一个小demo,暂时只实现了增加,删除单行,多行删除有Bug,查看详情,呕心沥血耗时一周完成,禁止抄袭,转载请先留言, ...
实现了bootstrapTable 的列宽可鼠标拖动,方便查看列宽显示不完全的内容,前台js