من أجل الإجابة على سؤال في عطلة نهاية الأسبوع ، كتبت مجموعة من التعليمات البرمجية وتم تنفيذ الوظائف بشكل أساسي ، لكنني شعرت أن الهيكل كان ضعيفًا للغاية ولم أفكر كثيرًا في الأمر. ليست جميلة على الإطلاق
نسخة الكود كما يلي:
<! doctype html>
<html>
<head>
<title> عنوان المستند </title>
<meta charset = utf-8>
<script src = "lib/jquery-1.8.1.min.js" type = "text/javaScript"> </script>
<type type = "text/css">
طاولة{
تباعد الحدود: 0 ؛
}
td {
الارتفاع: 50 بكسل ؛
العرض: 50 بكسل ؛
تباعد الحدود: 0 ؛
}
.مختفي{
العرض: لا شيء ؛
}
</style>
</head>
<body>
<griding>
<tr id = "r1">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</r>
<tr id = "r2">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</r>
</table>
<p id = 'log'> </p>
<button type = "button" onClick = "Combine ()"> Heing </utton>
<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'). Sentstr (1) -1] ؛
$ ('td').
// id لعلامة TR
//alert(ton (this).parent().attr('id ') ؛
// احصل على رقم العمود
//alert(ton (this).index()+1) ؛
$ (هذا) .css ('خلفية اللون' ، resultColor) ؛
SelectEcdLog.push ($ (this) .Attr ('id')) ؛
//alert(this).attr('id ') ؛
$ ("td"). mouseup (onMouseup) ؛
$ ("td"). mouseover (onMouseover) ؛
})
وظيفة onMouseup () {
/ * تصرف على الحدث */
var len = resultlen = math.abs (parseint (selectEcdLog [0] .Substr (selectecdlog [0] .indexof ('c')+1))) - parseint ($ (this) .attr ('id').
var begh = resultbegin = parseint (selectEcdLog [0] .Substr (selectEcdLog [0] .indexof ('c')+1))> parseint ($ (this) .Attr ('id'). Senttr (($ (this) .Attr ('id'). indexof ('c'))+1))؟ parseint ($ (this) .Attr ('id'). substr (($ (this) .attr ('id'). indexof ('c'))+1)) ؛
لـ (var i = 0 ؛ i <resultlen ؛ i ++)
{
SelectEcdLog.push (selectEcdLog [0] .Substr (0،2)+"C"+(resultBegin+I)) ؛
}
SelectEcdLog.shift () ؛
$ ('#log'). text (selectEcdLog.toString ()) ؛
$ ("td"). Undind ('mouseover' ، onMouseover) ؛
$ ("td"). Undind ('mouseup' ، onMouseup) ؛
}
وظيفة onMouseover (الوسيطة) {
var len = resultlen = math.abs (parseint (selectEcdLog [0] .Substr (selectecdlog [0] .indexof ('c')+1))) - parseint ($ (this) .attr ('id').
var begh = resultbegin = parseint (selectEcdLog [0] .Substr (selectEcdLog [0] .indexof ('c')+1))> parseint ($ (this) .Attr ('id'). Senttr (($ (this) .Attr ('id'). indexof ('c'))+1))؟ parseint ($ (this) .Attr ('id'). substr (($ (this) .attr ('id'). indexof ('c'))+1)) ؛
$ ('td').
لـ (var i = 0 ؛ i <len ؛ i ++)
{
$ ('#'+selectecdlog [0] .Substr (0،2)+"c"+(start+i)).
}
// ALERT ($ (this) .ATTR ('id'). substr (($ (this) .attr ('id'). indexof ('c'))+1)) ؛
//$('#'+tdid).css('background-color '،' Red ') ؛
}
// SET ID ATTR لكل TD
$ ("td"). كل (دالة (فهرس ، فال) {
/ * تكرار من خلال صفيف أو كائن */
$ (this) .attr ('id' ، $ (this) .parent (). attr ('id')+"c"+($ (this) .index ()+1))}) ؛
// الجمع بين الخلايا
وظيفة الجمع (الوسيطة) {
// جسم...
لـ (var m في selectecdlog)
{
إذا (M == 0)
{
$ ('#'+selectecdlog [m]). attr ('colspan' ، resultlen) ؛
$ ('#'+selectecdlog [m]). css ('width' ، resultlen*50+"px") ؛
//$('#'+selectecdlog budapm.
}
آخر{
$ ('#'+selectecdlog [m]). addClass ('Hidden') ؛
}
}
}
</script>
</body>
</html>