单元选择合并变色示例代码_jquery

周末为了解答一个问题，写了一堆代码，功能基本实现，但感觉结构太差了，没太多考虑。一点都不漂亮

复制代码 代码如下:

The document title table{ border-spacing: 0; } td{ height: 50px; width: 50px; border-spacing: 0; } .hidden{ display: none; }

hebing var selectecdlog = []; var resultLen = 0; var resultBegin = 0; var backColor = ['red','green','blue']; // assume 3 rows 1 -red 2 - green 3 - blue var resultColor =0; $("td").mousedown(function() { selectecdlog = []; resultColor = backColor[$(this).parent().attr('id').substr(1)-1]; $('td').css('background-color', 'white'); // ID for tr tag //alert($(this).parent().attr('id')); //get the column No. //alert($(this).index()+1); $(this).css('background-color', resultColor); selectecdlog.push($(this).attr('id')); //alert($(this).attr('id')); $("td").mouseup(onMouseUp); $("td").mouseover(onMouseOver); }) function onMouseUp(){ /* Act on the event */ 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 (argument) { 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('background-color', 'white'); for(var i =0; i { $('#'+selectecdlog[0].substr(0,2)+"c"+(begin+i)).css('background-color', resultColor); } //alert( $(this).attr('id').substr(($(this).attr('id').indexOf('c'))+1)); //$('#'+tdId).css('background-color', 'red'); } // set id attr for each td $("td").each(function(index, val){ /* iterate through array or object */ $(this).attr('id', $(this).parent().attr('id')+"c"+($(this).index()+1))}); //combine cells function combine (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'); } } }

单元选择合并变色示例代码_jquery

相关文章