linder0209
- 浏览: 322612 次
- 性别:
-
文章分类
最新评论
-
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 1087angular分析 -
键盘KeyCode值列表
2012-08-28 18:13 1110keycode 0 = keycode 1 = k ... -
JavaScript中的delete操作符
2012-04-20 14:17 1502主要从以下几个方面说 ... -
javascript性能优化之一
2012-04-04 21:01 0该篇文章转自 http://blog.sina.com.cn ... -
DOM节点中属性nodeName、nodeType和nodeValue的区别
2012-03-20 17:31 3751(一)nodeName 属性含有某个节点的名称。 元素节 ... -
javascript正则表达式总结
2012-03-16 13:53 1506正则表达式中特殊字符的含义 1、^ ^匹配输入字符串 ... -
javascript常用知识点总结（不断完善）
2011-07-04 17:15 1180一、函数中调用函数的实现 /** * 以下为 ... -
js对象的克隆
2011-06-14 15:02 2102由于js是采用引用传值的，故修改任何一个对象，其关 ... -
javascript中静态方法、实例方法、内部方法和原型的一点见解
2011-06-11 15:54 86001、静态方法的定义 var BaseClass = f ... -
javascript contains和compareDocumentPosition 方法来确定是否HTML节点
2011-03-30 17:41 15001、DOMElement.contains(DOMNode) ... -
事件mouseenter和事件mouseleave
2011-03-14 14:52 1824为了鼠标操作起来方便，IE实现了mouseenter 和m ... -
浏览器事件机制与自定义事件的实现
2011-03-14 14:03 4071一、 0 级 DOM 上的事件 ... -
JavaScript中Array（数组）的属性和方法
2009-06-03 17:13 1411数组有四种定义的方式 ... -
表格自动换行
2008-12-02 11:06 3059有时表格中显示的内容不会根据长度的加长而自动换行,显示的效果很 ... -
让表格有滚动条的实现
2008-12-02 10:23 5646主要是用div样式来控制 例如 <html> ... -
利用javascript验证输入框中的值是否为日期格式
2008-09-02 15:45 127961、判断是否为年月日时间格式 <script> ... -
web一些值得珍藏的脚本代码
2008-08-01 09:50 13241. oncontextmenu="window.e ... -
div垂直和水平居中
2008-06-29 16:34 1749<div id="div_1" st ... -
JS创建日历控件
2008-06-29 16:32 1884// JavaScript Document /******* ... -
JS获取系统当前日期和时间
2008-06-29 16:31 6755<!DOCTYPE HTML PUBLIC " ...
相关推荐
SHIFT+单击多行 CTRL+A 选择所有行 去做 鼠标拖行？ 更多选项和功能 如何 $('table').tableselect({ multiple: true, // Allow multiple or not activeClass: 'warning' // TR class: success, error, warning, ...
- 选中多行并一次性编辑：Ctrl+L 和 Ctrl+Shift+L - 删除当前行：Ctrl+Shift+K - 软撤销和硬撤销：Ctrl+Z 和 Ctrl+Y - 剪切光标所在行并插入到下一行：Ctrl+Shift+D - 代码缩进操作：Tab和Shift+Tab - 合并选中的...
**Ctrl + Shift + N：搜索打开工程中的文件** 这个快捷键允许用户快速地在项目中搜索并打开任何文件，无需通过文件树浏览，极大地提高了文件查找的效率。 ### 2. **Ctrl + J：输出模板** 在编写HTML时，按下此...
- 检查列表：`Ctrl/Command` + `Shift` + `C` - 插入代码：`Ctrl/Command` + `Shift` + `K` - 插入链接：`Ctrl/Command` + `Shift` + `L` - 插入图片：`Ctrl/Command` + `Shift` + `G` - 查找：`Ctrl/Command` + `F`...
Ctrl+Shift+箭头键可以选择连续区域。 9. **快速选定Excel区域**：使用Ctrl+Shift+End键可以快速选中从当前单元格到工作表末尾的所有数据。 10. **备份工作簿**：通过“文件”>“保存为”可以创建工作簿的备份副本...
在Dreamweaver中，可以通过Tab键将插入点移动到下一个单元格，Shift+Tab用于回退至上一个单元格，而箭头键可以实现上下左右的移动。这使得在表格中输入和编辑内容变得非常便捷。 导入外部数据是提高效率的一个重要...
- **Ctrl+Shift+L**: 当选中多行时，可以将这些行分割为多列，便于进行多行编辑。 - **Alt+F3**: 用于选择所有相同的文本，并进行同时编辑。 - **Ctrl+Enter**: 在当前行的下方添加新的一行。 - **Tab**: 补全标签...
在IT行业中，"设置整行选中"通常指的是在用户界面（UI）设计或编程时，如何实现用户能够一次性选择表格、列表或其他布局中的整行数据。这在各种应用程序和网页设计中非常常见，比如电子表格软件、数据库管理工具、...
CheckAlt&Shift&Ctrl.htm 检测Shift、Ctrl、Alt按键 CheckScreenX&Y.htm 获取客户端鼠标指针屏幕坐标 StopContextMenu.htm IE禁用右键菜单 IE cancel Bubble.htm IE中停止事件的多次响应 Dom stop event ...
- **选取文字**：选取文字有多种方式，如鼠标拖动选取、按住Shift键点击选取范围、使用Ctrl+A全选等，灵活选择符合需求的文字。 2. **页面排版** - **段落格式化**：包括设置对齐方式（左对齐、右对齐、居中、两...
10. **代码分段**：在R中，可以使用`Ctrl + Shift + Enter`或在行尾添加`\`来实现多行命令的输入，避免回车键导致未完成命令的执行。 11. **问题解答**： - SSH登陆Linux服务器中文显示乱码通常是因为字符编码设置...
CheckAlt&Shift&Ctrl.htm 检测Shift、Ctrl、Alt按键 CheckScreenX&Y.htm 获取客户端鼠标指针屏幕坐标 StopContextMenu.htm IE禁用右键菜单 IE cancel Bubble.htm IE中停止事件的多次响应 Dom stop event ...
CheckAlt&Shift&Ctrl.htm 检测Shift、Ctrl、Alt按键 CheckScreenX&Y.htm 获取客户端鼠标指针屏幕坐标 StopContextMenu.htm IE禁用右键菜单 IE cancel Bubble.htm IE中停止事件的多次响应 Dom stop event flow....
若要打开mdb文件、xls文件、csv文件、txt文件，可以点“Browse”按钮定位文件，也可以直接把文件拖到MdbFile列表框中。 若要打开SQLServer数据库，则需要在MdbFile输入框中输入“sql:ServerName,DataBaseName,...
4. 选择窗体控件：在编程环境中，可以通过单击、按住Shift键多选或Ctrl+A全选等方式选择多个对象，选项D正确描述了这些选择方式。 5. SQL 数据删除：在SQL中，DELETE命令用于删除数据记录，如`DELETE FROM table ...
掌握数组公式的概念、使用规则和语法，如使用Ctrl+Shift+Enter键来输入数组公式，能够解决涉及多行多列的复杂计算。常见的数组公式有SUMPRODUCT、COUNTIF/S、INDEX/MATCH等。 五、Excel经典技巧实例 通过实例学习...
- **数组公式**：处理多行或多列数据，需要配合Ctrl+Shift+Enter键输入。 3. **IF函数的条件逻辑** IF函数是Excel中最常用的逻辑函数，用于根据指定条件返回两个可能的结果。其语法为：IF(logical_test, value_if...
- 数组公式可以处理多行多列的数据，通过Ctrl + Shift + Enter输入。 - 使用嵌套函数（如IF嵌套在其他函数中）可以实现更复杂的逻辑。 8. **条件格式化与数据验证**： - 条件格式可使单元格颜色根据其值自动变化...
代码格式化可以通过快捷键`ctrl + shift + f`完成，快速输入则可以使用`alt + /`。 【MySQL数据库操作】 MySQL是一种广泛使用的关系型数据库管理系统，用于存储和管理数据。在Java中，我们通常使用JDBC（Java ...