JS拖动选择table里的单元格完整实例【基于jQuery】
本文实例讲述了JS拖动选择table里的单元格。分享给大家供大家参考，具体如下：
用JS 实现类似Excel里面动态选择单元格的例子，从网上得到的例子，先记录在这里，以后参考用。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.jb51.net JS拖动选择table里的单元格</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style>
.table-container {
width: 100%;
overflow-y: auto;
_overflow: auto;
margin: 0 0 1em;
background-color:white;
}
table {
border: 0;
border-collapse: collapse;
}
table td, table th {
border: 1px solid #999;
padding: .5em 1em;
}
/*添加IOS下滚动条 */
.table-container::-webkit-scrollbar {
-webkit-appearance: none;
width: 14px;
height: 14px;
}
.table-container::-webkit-scrollbar-thumb {
border-radius: 8px;
border: 3px solid #fff;
background-color: rgba(0, 0, 0, .3);
}
/*对齐*/
.table-time div {
text-align: center;
min-width: 104px;
}
.table-time, tr th {
background-color: #DBE5F1;
}
.table-time {
cursor: default !important;
}
.div-right {
text-align: right;
}
.div-unSelect {
background-color: #D8D8D8;
}
.div-Select {
background-color: #92D050;
}
.div-ISelect {
background-color: #FBD4B4;
}
/*图例*/
ul li {
list-style: none;
float: left;
}
.table-container td {
cursor: pointer;
}
</style>
<script>
$(function () {
initForm();
var monday = moment().startOf('isoWeek');
$("#txtMonday").val(monday.format("YYYY-MM-DD"));
renderWeek(monday);
})
function initForm() {
//初始化行
var duration = ["9:30~10：15", "10：30~11：15", "11：30~12：15", "13：30~14：15", "14：30~15：15", "15：30~16：15"];
$("tr td").parent().remove();
//TODO:从后台获得结果
for (var i = 0; i < duration.length; i++) {
var tempRow = " <tr>"
+ " <td class='table-time'>"
+ " <div>" + (i + 1) + "</div>"
+ " <div>" + duration[i] + "</div>"
+ "</td>"
+ " <td class='select div-ISelect'>" + "<div count='1'>已约：1人</div><div class='div-right'>√</div>" + "</td>"
+ " <td class='select'>" + "<div count='0'>已约：0人</div><div class='div-right'>?</div>" + "</td>"
+ " <td class='select div-Select'>" + "<div count='1'>已约：1人</div><div class='div-right'>?</div>" + "</td>"
+ " <td class='select'>" + "<div count='0'>已约：0人</div><div class='div-right'>?</div>" + "</td>"
+ " <td class='select div-unSelect'>" + "<div count='0'>已约：0人</div><div class='div-right'>?</div>"
+ "</td>"
+ " <td class='select div-unSelect'>" + "<div count='0'>已约：0人</div><div class='div-right'>?</div>"
+ "</td>"
+ " <td class='select div-unSelect'>" + "<div count='0'>已约：0人</div><div class='div-right'>?</div>"
+ "</td>"
+ " </tr>";
$("table tbody").append(tempRow);
}
var isMouseDown = false,
isHighlighted,
tickets = [];
//添加点击事件
$(".select").mousedown(function () {
isMouseDown = true;
var currentTD = $(this);
if (currentTD.hasClass("div-unSelect")) {
//alert("该时间段已关闭禁止选择");
return;
}
if (currentTD.hasClass("table-time")) {
//alert("这是时间段禁止选择");
return;
}
var countDiv = $(currentTD.children()[0]);
var correctDiv = $(currentTD.children()[1]);
var count = 0;
if (currentTD.hasClass("div-ISelect")) {
currentTD.removeClass("div-ISelect");
count = Number(countDiv.attr("count")) - 1;
correctDiv.html("?");
} else {
currentTD.addClass("div-ISelect");
count = Number(countDiv.attr("count")) + 1;
correctDiv.html("√");
}
countDiv.attr("count", count);
countDiv.html("已约：" + countDiv.attr("count") + "人");
isHighlighted = $(this).hasClass("div-ISelect");
selected();
return false; // prevent text selection
})
.mouseover(function (e) {
if (checkHover(e, this)) {
if (isMouseDown) {
var currentTD = $(this);
if (currentTD.hasClass("div-unSelect")) {
//alert("该时间段已关闭禁止选择");
return;
}
if (currentTD.hasClass("table-time")) {
//alert("这是时间段禁止选择");
return;
}
var countDiv = $(currentTD.children()[0]);
var correctDiv = $(currentTD.children()[1]);
var count = 0;
if (currentTD.hasClass("div-ISelect")) {
currentTD.removeClass("div-ISelect");
count = Number(countDiv.attr("count")) - 1;
correctDiv.html("?");
} else {
currentTD.addClass("div-ISelect");
count = Number(countDiv.attr("count")) + 1;
correctDiv.html("√");
}
countDiv.attr("count", count);
countDiv.html("已约：" + countDiv.attr("count") + "人");
selected();
}
}
});
$(document)
.mouseup(function () {
isMouseDown = false;
//alert('Deselected');
});
}
function selected() {
//tickets = $("div-ISelect").map(function () {
// return $(this).text();
//});
//console.log(tickets.get().join());
}
//初始化日期
function renderWeek(monday) {
$("#txtMonday").val(monday.format("YYYY-MM-DD"));
////获得这一周的所有日期
var myArray = new Array()
myArray[0] = monday.format("MM-DD");
for (var i = 1; i < 7; i++) {
var temp = moment(myArray[i - 1]).add(1, "days").format("MM-DD");
myArray[i] = temp;
}
$("tr th:gt(0)").each(function (i) {
var weekString = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];
$(this).html("<span>" + weekString[i] + " " + myArray[i] + "</span>");
});
$("caption").html(monday.format("YYYY-MM-DD") + "~" + monday.add(6, 'days').format("YYYY-MM-DD"));
}
//上一周
function lastWeek() {
initForm();
var currentDay = moment($("#txtMonday").val());
var lastMonday = currentDay.add(-1, 'weeks').startOf('isoWeek');//上周一
renderWeek(lastMonday);
}
//下一周
function nextWeek() {
initForm();
var currentDay = moment($("#txtMonday").val());
var nextMonday = currentDay.add(1, 'weeks').startOf('isoWeek');//上周一
renderWeek(nextMonday);
}
//全选
function selectAll() {
$("tr td").each(function () {
var currentTD = $(this);
if (currentTD.hasClass("div-ISelect") || currentTD.hasClass("div-unSelect") || currentTD.hasClass("table-time")) {
return;
}
var countDiv = $(currentTD.children()[0]);
var correctDiv = $(currentTD.children()[1]);
var count = 0;
currentTD.addClass("div-ISelect");
count = Number(countDiv.attr("count")) + 1;
correctDiv.html("√");
countDiv.attr("count", count);
countDiv.html("已约：" + countDiv.attr("count") + "人");
});
}
//判断是否重复mouseover
function checkHover(e, target) {
if (getEvent(e).type == "mouseover") {
return !contains(target, getEvent(e).relatedTarget || getEvent(e).fromElement) && !((getEvent(e).relatedTarget || getEvent(e).fromElement) === target);
} else {
return !contains(target, getEvent(e).relatedTarget || getEvent(e).toElement) && !((getEvent(e).relatedTarget || getEvent(e).toElement) === target);
}
} function getEvent(e) {
return e || window.event;
}
function contains(parentNode, childNode) {
if (parentNode.contains) {
return parentNode != childNode && parentNode.contains(childNode);
} else {
return !!(parentNode.compareDocumentPosition(childNode) & 16);
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<br />
<div class="table-title"></div>
<input type="text" name="name" value=" " id="txtMonday" />
<input id="btnLastWeek" type="button" name="name" value="上一周 " onclick="lastWeek()" />
<input id="btnNextWeek" type="button" name="name" value="下一周 " onclick="nextWeek()" />
<input id="btnSelectAll" type="button" name="name" value="全选 " onclick="selectAll()" />
<div class="table-container">
<table>
<caption>我是表格标题</caption>
<tbody>
<tr>
<th></th>
<th class="table-week"><span>周一</span></th>
<th class="table-week"><span>周二</span></th>
<th class="table-week"><span>周三</span></th>
<th class="table-week"><span>周四</span></th>
<th class="table-week"><span>周五</span></th>
<th class="table-week"><span>周六</span></th>
<th class="table-week"><span>周日</span></th>
</tr>
</tbody>
</table>
<div>
<ul>
<li><span class="div-Select">□</span>表示已有教练预约 </li>
<li><span class="div-ISelect">□</span>表示当前已预约，同时以“√”表示 </li>
<li><span>□</span>表示可预约 </li>
<li><span class="div-unSelect">□</span>表示未开放</li>
</ul>
</div>
</div>
</form>
</body>
</html>
运行效果：
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery表格(table)操作技巧汇总》、《jQuery操作xml技巧总结》、《jQuery form操作技巧汇总》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
相关推荐
-
jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例
本文实例讲述了jQuery实现Table表格隔行变色及高亮显示当前选择行效果.分享给大家供大家参考,具体如下: 最近客户要求高亮选择列表的功能,于是顺便做了个,作为记录. 前台代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=
-
用Jquery选择器计算table中的某一列某一行的合计
利用Jquery选择器,计算table中的某一列,某一行的合计,非常方便.下面以计算行合计为例: 核心算法: $('#tableId tr').each(function() { $(this).find('td:eq(columnIndex)').each(function() { totalAmount += parseFloat($(this).text()); }) }); 下面是案例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T
-
合并table相同单元格的jquery插件分享(很精简)
效果如下 原表格: col0 col1 col2 col3 SuZhou 11111 22222 SuZhouCity SuZhou 33333 44444 SuZhouCity SuZhou 55555 66666 SuZhouCity ShangHai 77777 88888 ShangHaiCity ShangHai uuuuu hhhhh ShangHaiCity ShangHai ggggg ccccc ShangHaiCity GuangZhou ttttt eeeee GuangZ
-
jQuery操作checkbox选择(list/table)
1.checkbox list选择 效果图: 代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head
-
jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法
本文实例讲述了jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法.分享给大家供大家参考,具体如下: JS鼠标双击事件 onDblClick <td width="10%" title="双击修改" ondblclick="ShowElement(this,<%#Eval("id") %> </td> 这里的本人用绑定的值是传的当前行对应的ID号 function ShowEle
-
基于jquery的合并table相同单元格的插件(精简版)
效果如下 原表格: col0 col1 col2 col3 SuZhou 11111 22222 SuZhouCity SuZhou 33333 44444 SuZhouCity SuZhou 55555 66666 SuZhouCity ShangHai 77777 88888 ShangHaiCity ShangHai uuuuu hhhhh ShangHaiCity ShangHai ggggg ccccc ShangHaiCity GuangZhou ttttt eeeee GuangZ
-
jQuery 选择表格(table)里的行和列及改变简单样式
jQuery对表格(table)的处理提供了相当强大的功能,比如说对表格特定行(row)或列(column)进行排序.样式改变等等.如果你的英文够好,你可以读读这篇文章:jQuery table manipulation.本文只是介绍如何用jQuery语句对表格中行和列进行选择以及一些简单样式改变,希望它可以对jQuery表格处理的深层学习提供一些帮助. 比如我们有这样一个表格: 第一列 第二列 第三列 第四列 第一列 第二列 第三列 第四列 第一列 第二列 第三列 第四列 第一列 第二列 第三
-
使用jQuery 操作table 完成单元格合并的实例
比较表格的内容.判断是否合并单元格: tr = $("#printPage tr").length;// 获取当前表格中tr的个数 var mark = 0; //要合并的单元格数 var index = 0; //起始行数 /* * 要合并单元格,需要存储两个参数, * 1,开始合并的单元格的第一行的行数, * 2.要合并的单元格的个数 **/ console.log(tr); //判断 若只有一行数据,则不做调整 if(tr <= 2){ }else{ //var i=1 比
-
JS与jQuery遍历Table所有单元格内容的方法
本文实例讲述了JS与jQuery遍历Table所有单元格内容的方法.分享给大家供大家参考,具体如下: 用JS去遍历Table的所有单元格中的内容,可以用如下JS代码实现: function GetInfoFromTable(tableid) { var tableInfo = ""; var tableObj = document.getElementById(tableid); for (var i = 0; i < tableObj.rows.length; i++) { /
-
jQuery获取table行数并输出单元格内容的实现方法
本文实例讲述了jQuery获取table行数并输出单元格内容.分享给大家供大家参考,具体如下: js部分: <script language="javascript" type="text/javascript"> $(function() { $("#txtInput").attr("value", "90"); var v_temp = $("#lblMessage").