COOL and practical dynamic effects_time and date

When I was working on a project recently, the customer requested that the data in the table can be dragged and selected, so I wrote the following method using JS. Supports IE, FIREFOX and other browsers. Realize the selection of the entire row and column of data, select all, invert the selection, clear, and select all the cell data in the rectangular range dragged out of the data table.

PS:

1. If the data cell has no data, please set the ID to empty or remove the ID, and set the style to "inactive". This cell will be skipped when selecting.

2. If you do not want a certain cell to be selected, please set the class to "bg_green", then this cell will be skipped when selecting.

<p> </p> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>calendar</title> <p><style type="text/css"> /*button style*/ .button{ padding: 2px; color: #F5F5F5; background-color: #3665A5; border-width: 1px 2px 2px 1px; border-color: #D2D2D2 #305B93 #305B93 #D2D2D2; border-style: solid; font: bold 14px verdana; }<style type="text/css"> /*button style*/ .button{ padding: 2px; color: #F5F5F5; background-color: #3665A5; border-width: 1px 2px 2px 1px; border-color: #D2D2D2 #305B93 #305B93 #D2D2D2; border-style: solid; font: bold 14px verdana; }</style></p> <p>body,td{margin:0;font:12px verdana;cursor:default;} #ca td{/*width:20px;height:25px;*/border-right:1px solid;border-bottom:1px solid;text-align:center;} .daysTitle td{border-right:1px solid #A6D2FF;text-align:center;font-weight:bold;} .font_red{color:red;} .monthsTitle td{border-bottom:1px solid #A6D2FF;text-align:center;color:#fafafa;} .bg_red{background-color:#FF0000;color:#FFFFCC; border-color:#FFCCCC;} .bg_green{background-color:#00CC00;} .inactive{background-color:#E1F0FF; border-color:#A6D2FF;} .noData{background-color:#ccc; border-color:#999;} body,td{margin:0;font:12px verdana;cursor:default;} #ca td{/*width:20px;height:25px;*/border-right:1px solid;border-bottom:1px solid;text-align:center;} .daysTitle td{border-right:1px solid #A6D2FF;text-align:center;font-weight:bold;} .font_red{color:red;} .monthsTitle td{border-bottom:1px solid #A6D2FF;text-align:center;color:#fafafa;} .bg_red{background-color:#FF0000;color:#FFFFCC; border-color:#FFCCCC;} .bg_green{background-color:#00CC00;} .inactive{background-color:#E1F0FF; border-color:#A6D2FF;} .noData{background-color:#ccc; border-color:#999;} </p> <p></p> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr align="center" valign="middle" bgcolor="#99CCFF"> <td height="40" colspan="2"> <input class="button" type="submit" value=" < " name="Submit3"> 2006 <input class="button" type="submit" value=" > " name="Submit4"> </td> <p> </p> </tr> <tr bgcolor="#0099CC"> <td height="25"> </td> <td height="25" align="left" valign="top"> <table width="100%" border="0" cellpadding="0" cellspacing="0" class="daysTitle" id="days"> <p> </p> <tr align="center" valign="middle"> <td width="20" height="25">M</td> <td width="20" height="25">T</td> <td width="20" height="25">W</td> <p> </p> <td width="20" height="25">T</td> <td width="20" height="25">F</td> <td width="20" height="25" class="font_red">S</td> <td width="20" height="25" class="font_red">S</td> <p> </p> <td width="20" height="25">M</td> <td width="20" height="25">T</td> <td width="20" height="25">W</td> <td width="20" height="25">T</td> <p> </p> <td width="20" height="25">F</td> <td width="20" height="25" class="font_red">S</td> <td width="20" height="25" class="font_red">S</td> <td width="20" height="25">M</td> <p> </p> <td width="20" height="25">T</td> <td width="20" height="25">W</td> <td width="20" height="25">T</td> <td width="20" height="25">F</td> <p> </p> <td width="20" height="25" class="font_red">S</td> <td width="20" height="25" class="font_red">S</td> <td width="20" height="25">M</td> <td width="20" height="25">T</td> <p> </p> <td width="20" height="25">W</td> <td width="20" height="25">T</td> <td width="20" height="25">F</td> <td width="20" height="25" class="font_red">S</td> <p> </p> <td width="20" height="25" class="font_red">S</td> <td width="20" height="25">M</td> <td width="20" height="25">T</td> <td width="20" height="25">W</td> <p> </p> <td width="20" height="25">T</td> <td width="20" height="25">F</td> <td width="20" height="25" class="font_red">S</td> <td width="20" height="25" class="font_red">S</td> <p> </p> <td width="20" height="25">M</td> <td width="20" height="25">T</td> <td width="20" height="25">W</td> <td width="20" height="25">T</td> <p> </p> <td width="20" height="25">F</td> <td width="20" height="25" class="font_red">S</td> <td width="20" height="25" class="font_red">S</td> </tr> <p> </p> </table> <script language="javascript" type="text/javascript" src="array.js"></script> <script type="text/javascript" language="javascript"> <P>/****************************************************************** 姝や唬</script> </td> </tr> </table>