滑动选中td，支持多选单选

Posted 2020-10-18

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了滑动选中td，支持多选单选相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>

 <head>
 <meta charset="utf-8">
 <title>drag table</title>
 <style>
 table {
 /*border: 1px solid #333333;*/
 }

 th {
 border-bottom: 1px solid #333333;
 }

 td {
 width: 50px;
 height: 30px;
 border-right: 1px solid #333333;
 border-bottom: 1px solid #333333;
 text-align: center;
 position: relative;
 }

 td.bgColor {
 background-color: rgba(119, 119, 119, 0.3);
 cursor: pointer;
 }

 tr td:first-child {
 border-left: 1px solid #333333;
 }

 span {
 display: none;
 width: 16px;
 height: 16px;
 border-radius: 50%;
 background: #FF8C80;
 }

 span.active {
 display: block;
 position: absolute;
 top: 0px;
 left: 0px;
 transform: translate(100%, 50%);
 }
 </style>
 </head>

 <body>
 <table cellpadding="0" cellspacing="0">
 <thead>
 <tr>
 <th colspan="8">drag table</th>
 </tr>
 </thead>
 <tbody>
 <tr id="0">
 <td>00</td>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 </tr>
 <tr id="1">
 <td onselectstart="return false" onselect="document.selection.empty()">99</td>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 </tr>
 <tr id="2">
 <td>99</td>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 </tr>
 <tr>
 <td>99</td>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 </tr>
 <tr>
 <td>99</td>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 </tr>
 <tr>
 <td>99</td>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 </tr>
 </tbody>
 </table>
 </body>

</html>
<script src="js/jquery.js" type="text/javascript"></script>
<script>
 $(document).ready(function() {
 var StartId = null;
 var StartIndex = null;
 var EndId = null;
 var EndIndex = null;
 var tdJson = [];
 var drawing = false;
 $(‘td‘).bind(‘mousedown‘, function() {
 drawing = true;
 $(this).addClass(‘bgColor‘);
 var y = $(this).index();
 var x = $(this).parent().index();
 StartIndex = {
 x: x,
 y: y
 };
 });

 $(‘td‘).bind(‘mouseover‘, function() {
 if(drawing) {
 $(this).addClass(‘bgColor‘);

　　　　//获取鼠标移入td的索引

//var data = {};
 // var y = $(this).index();
 //var x = $(this).parent().index();
 //data[‘trIndex‘] = x;
 //data[‘tdIndex‘] = y;
 //tdJson.push(data);
 } else {
 drawing = false;
 }
 });

 $(‘td‘).bind(‘mouseup‘, function() {
 drawing = false;
 $(‘table td‘).removeClass(‘bgColor‘);
 var y = $(this).index();
 var x = $(this).parent().index();
 EndIndex = {
 x: x,
 y: y
 };
 SelectTD(StartIndex, EndIndex, ‘green‘);
 });
 });

 function SelectTD(StartIndex, EndIndex, Color) {
 var MinX = null;
 var MaxX = null;
 var MinY = null;
 var MaxY = null;
 if(StartIndex.x < EndIndex.x) {
 MinX = StartIndex.x;
 MaxX = EndIndex.x;
 } else {
 MinX = EndIndex.x;
 MaxX = StartIndex.x;
 }
 if(StartIndex.y < EndIndex.y) {
 MinY = StartIndex.y;
 MaxY = EndIndex.y;
 } else {
 MinY = EndIndex.y;
 MaxY = StartIndex.y;
 }
 StartIndex = {
 x: MinX,
 y: MinY
 };
 EndIndex = {
 x: MaxX,
 y: MaxY
 };
 for(var i = MinX + 1; i <= MaxX + 1; i++) {
 var SelectTR = $(‘table tr‘).eq(i);
 for(var j = MinY; j <= MaxY; j++) {
 if(j != 0) {
 $(‘table tr‘).eq(i).find(‘td:eq(‘ + j + ‘) span‘).toggleClass(‘active‘);
 }
 }
 }
 }
</script>

以上是关于滑动选中td，支持多选单选的主要内容，如果未能解决你的问题，请参考以下文章

MFC中如何取消已选单选框的勾选状态？

IOS多选单选相册图片

checkbox：全选全不选单选（慕课网题目）

UITableView中按顺序多选单元格

如何获取所选单选按钮的值？

全选取消全选单选