週末に質問に答えるために、私はたくさんのコードを書きました、そして、機能は基本的に実装されましたが、私は構造があまりにも貧弱であり、私はそれについてあまり考えていないと感じました。まったくきれいではありません
コードコピーは次のとおりです。
<!doctype html>
<html>
<head>
<title>ドキュメントタイトル</title>
<メタcharset = utf-8>
<スクリプトsrc = "lib/jquery-1.8.1.min.js" type = "text/javascript"> </scrip>
<style type = "text/css">
テーブル{
境界面:0;
}
TD {
高さ:50px;
幅:50px;
境界面:0;
}
。隠れた{
表示:なし;
}
</style>
</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>
</table>
<p id = 'log'> </p>
<button type = "button" 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')。subst(1)-1];
$( 'td')。css( 'background-color'、 'white');
// TRタグのID
//alert(this).parent( )..attr('id '));
//列番号を取得します
//alert(this).index() +1);
$(this).css( 'background-color'、resultcolor);
selectecdlog.push($(this).attr( 'id'));
//alert(thispry).attr('id '));
$( "td")。mouseup(onmouseup);
$( "TD")。マウスオーバー(オンマウスオーバー);
})
function onmouseup(){
/ *イベントで行動する */
var len = resultlen = math.abs(parseint(selectecdlog [0] .substr(selectecdlog [0] .indexof( 'c')+1))) - parseint($(this).attr( 'id')。
var begin = resultbegin = parseint(selectecdlog [0] .substr(selectecdlog [0] .indexof( 'c')+1))> parseint($(this).attr( 'id')。 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);
}
function onmouseover(argument){
var len = resultlen = math.abs(parseint(selectecdlog [0] .substr(selectecdlog [0] .indexof( 'c')+1))) - parseint($(this).attr( 'id')。
var begin = resultbegin = parseint(selectecdlog [0] .substr(selectecdlog [0] .indexof( 'c')+1))> parseint($(this).attr( 'id')。 parseint($(this).attr( 'id')。substr(($(this).attr( 'id')。indexof( 'c'))+1));
$( 'td')。css( 'background-color'、 'white');
for(var i = 0; i <len; i ++)
{
$( '#'+selectecdlog [0] .substr(0,2)+"c"+(begin+i))。css( 'background-color'、resultcolor);
}
// alert($(this).attr( 'id')。substr(($(this).attr( 'id')。indexof( 'c'))+1));
//$('#'urtdid).css('background-color '、' red ');
}
//各TDのID attrを設定します
$( "td")。各(function(index、val){
/ *配列またはオブジェクトを介して反復 */
$(this).attr( 'id'、$(this).parent()。attr( 'id')+"c"+($(this).index()+1)});
//セルを結合します
関数combine(引数){
// 体...
for(selectecdlogのvar m)
{
if(m == 0)
{
$( '#'+selectecdlog [m])。attr( 'colspan'、resultlen);
$( '#'+selectecdlog [m])。css( 'width'、resultlen*50+"px");
//$('#' +selectecdlog [m]).css('background-color '、' bule ');
}
それ以外{
$( '#'+selectecdlog [m])。addclass( 'hidden');
}
}
}
</script>
</body>
</html>