單元選擇合併變色範例程式碼_jquery

;






表格{
邊框間距：0;
}
td{
高度：50px；
寬度：50px;
邊框間距：0;
}
.hidden{
顯示：無;
}
風格>
頭>



























表>

hebing;

var selectecdlog = [];
var resultLen = 0;
var resultBegin = 0;
var backColor = ['紅色','綠色','藍色']; // 假設有3 行1 - 紅色2 - 綠色3 - 藍色
var resultColor =0;
$("td").mousedown(function() {
selectecdlog = [];
resultColor = backColor[$(this).parent().attr(' id').substr(1 )-1];
$('td').css('background-color', 'white');
// tr 標籤的ID
//alert ($(this).parent ().attr('id'));
//取得列號
//alert($(this).index() 1);
$(this ).css('背景顏色', resultColor);
selectecdlog.push($(this).attr('id'));
//alert($(this).attr('id') ); >$("td").mouseup(onMouseUp);
$("td").mouseover(onMouseOver);
})
function 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))) 1;
var begin =resultBegin= parseInt(selectecdlog[0].substr( selectecdlog[0].indexOf('c') 1)) >parseInt($(this).attr('id').substr(( $(this).attr('id').indexOf('c') ) 1)) ？ parseInt($(this).attr('id').substr(($(this).attr('id').indexOf('c')) 1)):parseInt(selectecdlog[0].substr(selectecdlog ) [0].indexOf('c') 1));
for(var i =0; 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 (參數參數) {
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))) 1;
var begin =resultBegin= parseInt(selectecdlog[0].substr(selectecdlog[0 ].indexOf('c') 1)) >parseInt($(this).attr('id').substr(( $(this).attr('id').indexOf('c')) 1) ) ？ parseInt($(this).attr('id').substr(($(this).attr('id').indexOf('c')) 1)):parseInt(selectecdlog[0].substr(selectecdlog ) [0].indexOf('c') 1));
$('td').css('背景顏色', '白色');
for(var i =0; i{
$('#' selectecdlog[0].substr(0,2) "c" (begin i)).css( '背景顏色', resultColor);
}
//alert( $(this).attr('id').substr(($(this).attr('id').indexOf('c')) 1));
//$ ('#' tdId).css('背景顏色', '紅色');
}
// 為每個td 設定id attr
$("td").each(function(index , val){
/* 遍歷陣列或物件*/
$ (this).attr('id', $(this).parent().attr('id') "c" ($( this).index() 1))});
//合併單元格
function merge (argument) {
// body...
for (var m in selectecdlog)
{
if(m==0)
{
$('#' selectecdlog[m]).attr('colspan', resultLen);
$('#' selectecdlog[m ]).css('width',resultLen*50 "px");
//$('#' selectecdlog[m]).css('background-color', 'bule');
}
else{
$('#' selectecdlog[m]).addClass('hidden');
}
}
}
腳本>
身體>