jquery表格中鼠标按下，选择单元格范围的事件

Posted 2023-03-28

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery表格中鼠标按下，选择单元格范围的事件相关的知识，希望对你有一定的参考价值。

希望高手给出一份完整的代码。可以发送邮件到stvsui@hotmail.com中。
要求：一个table表格，只需要在列里，共有100列，其中任意列按下鼠标后，可以对选中的多个单元格设置背景色，并可以知道哪些被选中。就像是Excel拖着选单元格那样。
另外，还需要返回给出所选的，行ID及列范围。
选中范围的单元格，需要合并后加入一个有边框的div。谢谢~~
由于本人大都高后台，所以对于前台的JS一直没怎么系统的学习过，现在在做一个小工具的时候，遇到个问题，希望得到JS大神们的帮助，谢谢。
希望高手给出一份完整的可以执行的代码，多谢~~~
要求：Jquery。
（1）一个table表格有4行40列。
（2）在任意单元格，按下鼠标后，可以选中多个列（只能是列），松开鼠标后，这些单元格的背景色变化。（就像是Excel拖动单元格选择似的那种）
（3）有一个函数接收并打印出来，（2）操作的：行ID，列（StartID，EndID)
另外，
如果所选中的那些单元格，可不可以合并，然后添加有边框的一个DIV。

如果有这方面的插件希望也能推荐下（但不是要那种点击后，输入的…………）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
<html xmlns="
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<script type="text/javascript" src="
<script type="text/javascript">
!window.jQuery && document.write('<script src=
);
</script>
<script type="text/javascript">
var key = 0;
var arrPos = new Array();
$(document).ready(function()
$("td").css("height","20px");
$("#tab").mousemove(function(e)
  var x = e.clientX, y = e.clientY;
  if (arrPos.length > 0)
   if (y <= arrPos[0][1]+10 &&y >= arrPos[0][1]-10 &&1==key && e.target.tagName =="TD")

    $(e.target).css("background","#666").addClass("selected");


    );
$("#tab").mousedown(function(e)
  var x = e.clientX, y = e.clientY;
  arrPos.push(Array(x,y));
  $("#result").html("X:"+x+";Y:"+y)
  key=1;
    );
$("#tab").mouseup(function(e)
  arrPos=new Array();
  key=0;
    );
)
</script>
</head>
<body onselectstart="return false">
<table width="1200" border="1" cellspacing="1" cellpadding="1" id="tab">
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
</table>
<div id ="result"></div>

</body>
</html>

实现了你说的1,2的功能偶尔还是会跨行选。。你参考下吧。用js来完成excel的功能，很不好弄。。

参考技术A 用jquery-easyui里面有datagrid追问

datagrid是可以输入的，不要那种。

参考技术B 找一个插件不就ok了，如miniui，easyui等等参考技术C 楼主这个实现了吗？

在 SQL FROM 语句中使用“*”访问 Excel 单元格范围

【中文标题】在 SQL FROM 语句中使用“*”访问 Excel 单元格范围【英文标题】：Using '*' in SQL FROM statement to access Excel cell range 【发布时间】：2015-11-27 12:51:21 【问题描述】：

我有一个将 .xlsx 文件转换为 .csv 文件的脚本，但该脚本使用 Excel 中的单元格区域来读取数据。该脚本正在运行，但我希望扩展它以防止可能的用户错误。

选择 Excel 单元格范围的查询（在 SQL 中）：

  string query = "SELECT * FROM fileName";

我想要做的是让脚本选择“ALL”类型的范围，这样如果用户更改了文件名，它仍然可以工作。像这样：

  string query = "SELECT * FROM User_*";

User_ 将是每个文档的标准，但用户可以更改 _ 之后的内容。在这种情况下，使用 * 不被接受为 ALL，而且我似乎找不到有效的方法。

【问题讨论】：

【参考方案1】：

在转换文档之前，我使用了另一个脚本在文档上运行 Excel 宏。此宏将单元格区域的名称更改为现在用于转换文档的通用名称。

【讨论】：

以上是关于jquery表格中鼠标按下，选择单元格范围的事件的主要内容，如果未能解决你的问题，请参考以下文章

LibreOffice Calc：如何一次突出显示单元格范围的最大值？

VBA：如何搜索单元格范围的值，并返回该位置旁边的单元格？

在 SQL FROM 语句中使用“*”访问 Excel 单元格范围

使用 VBA 循环遍历 Excel 中表格范围的第一列

超链接到具有相同名称/值的单元格范围 - Google 表格

使用 google 电子表格 API 仅删除单元格范围选择的格式