jQuery自定义框并获取框内数据

<script type="text/javascript">
 //鼠标按下时的X Y坐标
 varmouseDownX;
 varmouseDownY;
 //鼠标按下时移动的X Y 坐标
 varmouseMoveX;
 varmouseMoveY;
 //移动的状态
 varisMove =false;
 /*初始化 选择框 */
 functioninit() {
 $("#selected").css("display","none");
 $("#selected").css("top","0");
 $("#selected").css("left","0");
 $("#selected").css("width","0");
 $("#selected").css("height","0");
 }
 $(document).ready(function() {
 init();
 varselectedTD =newArray();//创建被选中表格数组
 varTD = $("td");//获取所有表格信息
 for(vari = 0; i < TD.length; i++) {
 selectedTD.push(TD[i]);
 }
 $("#tablep").mousedown(function(event) {
 mouseDownX = event.clientX - $(this).offset().left;;
 mouseDownY = event.clientY - $(this).offset().top;
 console.log("mouseDownX="+ mouseDownX +" mouseDownY="+ mouseDownY );
 if(event.target.id.match(/selected/)) {
 isMove =true;
 }
 //鼠标按下并移动时进行判断（拖拽 or 画框）
 $("#tablep").mousemove(function(event) {
 mouseMoveX = event.clientX - $(this).offset().left;
 mouseMoveY = event.clientY - $(this).offset().top;
 varselectp = document.getElementById("selected");
 if(isMove) {
 //拖拽的代码，因为实在不想算 xy 了，所以使用了jquery ui
 $("#selected").draggable();
 //这部分是负责画框的时候，实时把框住的表格变色的，（代码和下面的代码重复了）
 varleft = selectp.offsetLeft, top = selectp.offsetTop; width = selectp.offsetWidth, height = selectp.offsetHeight;
 for(vari = 0; i < selectedTD.length; i++) {
 varsl = selectedTD[i].offsetWidth + selectedTD[i].offsetLeft;
 varst = selectedTD[i].offsetHeight + selectedTD[i].offsetTop;
 if(sl > left && st > top && selectedTD[i].offsetLeft < left + width && selectedTD[i].offsetTop < top + height) {
 if(selectedTD[i].className.indexOf("selected") == -1) {
 selectedTD[i].className ="selected";
 }
 }else{
 if(selectedTD[i].className.indexOf("selected") != -1) {
 selectedTD[i].className ="TD";
 }
 }
 }
 }else{
 //重复的代码，完了再把它抽取出来
 varleft = selectp.offsetLeft, top = selectp.offsetTop; width = selectp.offsetWidth, height = selectp.offsetHeight;
 for(vari = 0; i < selectedTD.length; i++) {
 varsl = selectedTD[i].offsetWidth + selectedTD[i].offsetLeft;
 varst = selectedTD[i].offsetHeight + selectedTD[i].offsetTop;
 if(sl > left && st > top && selectedTD[i].offsetLeft < left + width && selectedTD[i].offsetTop < top + height) {
 if(selectedTD[i].className.indexOf("selected") == -1) {
 selectedTD[i].className ="selected";
 }
 }else{
 if(selectedTD[i].className.indexOf("selected") != -1) {
 selectedTD[i].className ="TD";
 }
 }
 }
 //鼠标抬起结束画框，和拖动
 $("#tablep").mouseup(function() {
 console.log("mouseUpX="+ mouseMoveX +" mouseUpY="+ mouseMoveX);
 isMove =false;
 $(this).unbind('mousemove');
 })
 //画框
 displaySelected(mouseDownY, mouseDownX, mouseMoveX, mouseMoveY);
 }
 })
 })
 //当鼠标在已经画好的框上时，改变鼠标指针样式，就是十字形了
 $("#selected").mouseenter(function() {
 $("#selected").css("cursor","move");
 });
 });
 functiondisplaySelected(mouseDownY, mouseDownX, mouseUpX, mouseUpY) {
 $("#selected").css("display","block");
 $("#selected").css("top", mouseDownY);
 $("#selected").css("left", mouseDownX);
 varmoveX = mouseMoveX - mouseDownX;
 varmoveY = mouseMoveY - mouseDownY;
 if(moveY < 0) {
 $("#selected").css("top", event.clientY - $("#table").offset().top);
 }
 if(moveX < 0) {
 $("#selected").css("left", event.clientX - $("#table").offset().left);
 }
 $("#selected").css("width", Math.abs(moveX));
 $("#selected").css("height", Math.abs(moveY));
 }
 </script>

<p id="tablep"style="width: 1500px; height: 1500px;top: 100px; left:100px; position: absolute;">
 <p id="selected"style="border:5px dotted rgb(239, 37, 17);position: absolute;display: none;"></p>
 <table border="1"style=" width: 1500px; height: 1500px;"id="table">
 <tr>
 <td id="1"class="TD"></td>
 <td id="2"class="TD"></td>
 <td id="3"class="TD"></td>
 <td id="4"class="TD"></td>
 <td id="5"class="TD"></td>
 <td id="6"class="TD"></td>
 </tr>
 <tr>
 <td id="7"class="TD"></td>
 <td id="8"class="TD"></td>
 <td id="9"class="TD"></td>
 <td id="10"class="TD"></td>
 <td id="11"class="TD"></td>
 <td id="12"class="TD"></td>
 </tr>
 <tr>
 <td id="1"class="TD"></td>
 <td id="2"class="TD"></td>
 <td id="3"class="TD"></td>
 <td id="4"class="TD"></td>
 <td id="5"class="TD"></td>
 <td id="6"class="TD"></td>
 </tr>
 </table>
 <!--表格代码太多所以...-->
 </p>