週末に質問に答えるために、私はたくさんのコードを書きました、そして、機能は基本的に実装されましたが、私は構造があまりにも貧弱であり、私はそれについてあまり考えていないと感じました。まったくきれいではありません
コードコピーは次のとおりです。
<！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>