주말에 질문에 대답하기 위해 많은 코드를 썼고 기능은 기본적으로 구현되었지만 구조가 너무 가난하다고 생각했고 그것에 대해 많이 생각하지 않았습니다. 전혀 예쁘지 않습니다
코드 사본은 다음과 같습니다.
<! doctype html>
<html>
<헤드>
<title> 문서 제목 </title>
<meta charset = utf-8>
<script src = "lib/jquery-1.8.1.min.js"type = "text/javaScript"> </script>
<스타일 유형 = "텍스트/CSS">
테이블{
국경 간격 : 0;
}
TD {
높이 : 50px;
너비 : 50px;
국경 간격 : 0;
}
.숨겨진{
디스플레이 : 없음;
}
</스타일>
</head>
<body>
<테이블>
<tr id = "r1">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr id = "r2">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</테이블>
<p id = 'log'> </p>
<버튼 유형 = "버튼"onclick = "combine ()"> hebing </button>
<script type = "text/javaScript">
var selectecdlog = [];
var resultlen = 0;
var resultbegin = 0;
var backcolor = [ 'red', 'green', 'blue']; // 3 줄 1 -RED 2- 녹색 3- 파란색
var resultColor = 0;
$ ( "td"). Mousedown (function () {
selectecdlog = [];
resultColor = backColor [$ (this) .parent (). attr ( 'id'). substr (1) -1];
$ ( 'td'). css ( '배경색', '화이트');
// tr 태그의 ID
//alert($(THIS).parent () .attr('ID '));
// 열 번호를 가져옵니다.
//alert($(this).index()+1);
$ (this) .css ( '배경색', resultColor);
selectecdlog.push ($ (this) .attr ( 'id'));
//alert($(this).attr('id ');
$ ( "TD"). 마우스 업 (OnMouseUp);
$ ( "TD"). 마우스 오버 (OnMouseOver);
})
함수 onmouseup () {
/ * 이벤트에서 행동 */
var len = resultlen = math.abs (parseint (selectecdlog [0] .substr (selectecdlog [0] .indexof ( 'c')+1)))) - parseint ($ (this) .attr ( 'id'). substr (($ (this) .attr ( 'id'). indexof ( 'c'))+1;
var begin = resultbegin = parseint (selectecdlog [0] .substr (selectecdlog [0] .indexof ( 'c')+1)))> parseint ($ (this) .attr ( 'id'). asttr (($ (this)) .attr ( 'id'). indexof ( 'c')))? parseint ($ (this) .attr ( 'id'). substr (($ (this) .attr ( 'id'). indexof ( 'c'))+1);
for (var i = 0; i <resultlen; i ++)
{
selectecdlog.push (selectecdlog [0] .substr (0,2)+"c"+(resultbegin+i));
}
selectecdlog.shift ();
$ ( '#log'). text (selectecdlog.toString ());
$ ( "td"). Unbind ( 'Mouseover', OnMouseOver);
$ ( "TD"). Unbind ( 'MouseUp', OnMouseUp);
}
함수 OnMouseOver (Argument) {
var len = resultlen = math.abs (parseint (selectecdlog [0] .substr (selectecdlog [0] .indexof ( 'c')+1)))) - parseint ($ (this) .attr ( 'id'). substr (($ (this) .attr ( 'id'). indexof ( 'c'))+1;
var begin = resultbegin = parseint (selectecdlog [0] .substr (selectecdlog [0] .indexof ( 'c')+1)))> parseint ($ (this) .attr ( 'id'). asttr (($ (this)) .attr ( 'id'). indexof ( 'c')))? parseint ($ (this) .attr ( 'id'). substr (($ (this) .attr ( 'id'). indexof ( 'c'))+1);
$ ( 'td'). css ( '배경색', '화이트');
for (var i = 0; i <len; i ++)
{
$ ( '#'+selectEcdlog [0] .Substr (0,2)+"C"+(시작+i)). css ( 'background-color', resultColor);
}
// alert ($ (this) .attr ( 'id'). substr (($ (this) .attr ( 'id'). indexof ( 'c'))+1);
//$('#'+tdid).css('background-color ','red ');
}
// 각 td에 대한 ID attr를 설정합니다
$ ( "td"). 각 (함수 (인덱스, val) {
/ * 배열 또는 객체를 통해 반복 */
$ (this) .attr ( 'id', $ (this) .parent (). attr ( 'id')+"c"+($ (this) .index ()+1)));
// 셀을 결합합니다
함수 결합 (인수) {
// 몸...
for (selectecdlog의 var m)
{
if (m == 0)
{
$ ( '#'+selecteCdlog [m]). attr ( 'colspan', resultlen);
$ ( '#'+selecteCdlog [m]). css ( 'width', resultlen*50+"px");
//$('#'+ selectecdlog ]).css('background-color ','bule ');
}
또 다른{
$ ( '#'+selecteCdlog [m]). addClass ( 'hidden');
}
}
}
</스크립트>
</body>
</html>