Untuk menjawab pertanyaan pada akhir pekan, saya menulis banyak kode dan fungsinya pada dasarnya diimplementasikan, tetapi saya merasa bahwa strukturnya terlalu buruk dan saya tidak terlalu memikirkannya. Tidak cantik sama sekali
Salinan kode adalah sebagai berikut:
<! Doctype html>
<Html>
<head>
<Title> Judul dokumen </iteme>
<Meta Charset = UTF-8>
<skrip src = "lib/jQuery-1..8.1.min.js" type = "text/javaScript"> </script>
<type style = "text/css">
meja{
spasi perbatasan: 0;
}
td {
Tinggi: 50px;
Lebar: 50px;
spasi perbatasan: 0;
}
.tersembunyi{
Tampilan: Tidak Ada;
}
</tyle>
</head>
<body>
<able>
<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>
</boable>
<p id = 'log'> </p>
<Tombol Type = "Tombol" OnClick = "Combine ()"> Hebing </button>
<type skrip = "Teks/JavaScript">
var selectecdlog = [];
var resultlen = 0;
var resultBegin = 0;
var backcolor = ['merah', 'hijau', 'biru']; // Asumsikan 3 baris 1 -red 2 - hijau 3 - biru
var resultColor = 0;
$ ("td"). mousedown (function () {
selectecdlog = [];
resultColor = backcolor [$ (ini) .parent (). attr ('id'). Substr (1) -1];
$ ('td'). css ('latar belakang-warna', 'putih');
// ID untuk tag TR
//alert($(THis).parent().attr('id '));
// Dapatkan Kolom No.
//alert($(THIS).Index()+1);
$ (ini) .css ('latar belakang-warna', resultColor);
selectecdlog.push ($ (ini) .attr ('id'));
//alert($(THIS).ATTR('ID '));
$ ("TD"). MouseUp (OnmouseUp);
$ ("TD"). Mouseover (Onmouseover);
})
function onMouseUp () {
/ * Bertindak di acara */
var len = resultlen = math.abs (parseInt (selectecdlog [0] .substr (selectecdlog [0] .indexof ('c')+1))) - parseInt ($ (this) .attr ('id'). Substr (($ ini) .attr ('id'). IndexOf ('c')).
var begin = resultBegin = parseInt (selectecdlog [0] .substr (selectecdlog [0] .indexof ('c')+1))> parseInt ($ (this) .attr ('id'). substr (($ (this) .attr ('id'). indexof ('c'))+1))? parseint ($ (ini) .attr ('id'). Substr (($ (this) .attr ('id'). IndexOf ('c'))+1));
untuk (var i = 0; i <resultlen; i ++)
{
selectecdlog.push (selectecdlog [0] .substr (0,2)+"c"+(resultBegin+i));
}
selectecdlog.shift ();
$ ('#log'). Teks (selectecdlog.toString ());
$ ("td"). unbind ('mouseover', onmouseover);
$ ("TD"). Unbind ('MouseUp', OnmouseUp);
}
function onmouseover (argumen) {
var len = resultlen = math.abs (parseInt (selectecdlog [0] .substr (selectecdlog [0] .indexof ('c')+1))) - parseInt ($ (this) .attr ('id'). Substr (($ ini) .attr ('id'). IndexOf ('c')).
var begin = resultBegin = parseInt (selectecdlog [0] .substr (selectecdlog [0] .indexof ('c')+1))> parseInt ($ (this) .attr ('id'). substr (($ (this) .attr ('id'). indexof ('c'))+1))? parseint ($ (ini) .attr ('id'). Substr (($ (this) .attr ('id'). IndexOf ('c'))+1));
$ ('td'). css ('latar belakang-warna', 'putih');
untuk (var i = 0; i <len; i ++)
{
$ ('#'+selectecdlog [0] .substr (0,2)+"c"+(mulai+i)). css ('latar belakang-warna', resultColor);
}
// alert ($ (this) .attr ('id'). substr (($ (this) .attr ('id'). indexOf ('c'))+1));
//$('#'+tdid).css('Background-color ',' Red ');
}
// atur id attr untuk setiap td
$ ("td"). masing -masing (fungsi (index, val) {
/ * iterate melalui array atau objek */
$ (ini) .attr ('id', $ (this) .parent (). attr ('id')+"c"+($ (this) .index ()+1))});
// Gabungkan sel
function combine (argumen) {
// tubuh...
untuk (var m di selectecdlog)
{
if (m == 0)
{
$ ('#'+selectecdlog [m]). attr ('colspan', resultlen);
$ ('#'+selectecdlog [m]). css ('lebar', resultlen*50+"px");
//$('#'+Selectecdlog Bunyis ).css('Background-color ',' Bule ');
}
kalau tidak{
$ ('#'+selectecdlog [m]). addClass ('hidden');
}
}
}
</script>
</body>
</html>