單元選擇合并變色示例代碼
更新時間：2014年05月26日 09:06:42 作者：
這篇文章主要介紹了如何實現(xiàn)單元選擇合并變色，感覺還不錯的一個小功能，大家可以學(xué)習(xí)下
周末為了解答一個問題，寫了一堆代碼，功能基本實現(xiàn)，但感覺結(jié)構(gòu)太差了，沒太多考慮。一點都不漂亮
<!DOCTYPE HTML>
<HTML>
<head>
<TITLE>The document title</TITLE>
<meta charset=utf-8>
<script src="lib/jquery-1.8.1.min.js" type="text/javascript"></script>
<style type="text/css">
table{
border-spacing: 0;
}
td{
height: 50px;
width: 50px;
border-spacing: 0;
}
.hidden{
display: none;
}
</style>
</head>
<body>
<table border="1">
<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']; // 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<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').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<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));
//$('#'+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');
}
}
}
</script>
</body>
</HTML>
復(fù)制代碼 代碼如下:
<!DOCTYPE HTML>
<HTML>
<head>
<TITLE>The document title</TITLE>
<meta charset=utf-8>
<script src="lib/jquery-1.8.1.min.js" type="text/javascript"></script>
<style type="text/css">
table{
border-spacing: 0;
}
td{
height: 50px;
width: 50px;
border-spacing: 0;
}
.hidden{
display: none;
}
</style>
</head>
<body>
<table border="1">
<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']; // 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<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').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<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));
//$('#'+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');
}
}
}
</script>
</body>
</HTML>
相關(guān)文章
這篇文章主要介紹了jQuery實現(xiàn)的簡單對話框拖動功能,涉及jQuery事件響應(yīng)、數(shù)值運算及頁面元素屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2018-06-06
實現(xiàn)滾動加載的一個功能函數(shù)，需要的朋友可以參考一下2013-03-03
這篇文章主要介紹了jquery漸隱漸顯的圖片幻燈閃爍切換實現(xiàn)方法,實例分析了jQuery操作圖片的技巧及鼠標事件用法,需要的朋友可以參考下2015-02-02
一個簡單的jQuery插件ajaxfileupload.js實現(xiàn)ajax上傳文件例子
這篇文章主要介紹了一個簡單的jQuery插件ajaxfileupload.js實現(xiàn)ajax上傳文件例子,需要的朋友可以參考下2014-06-06
屬性的類型可以為：圖片、文本框、按鈕，然后選擇需要設(shè)置的屬性值：src、width、height、title、value等等，具體實現(xiàn)如下，感興趣的朋友可以參考下哈2013-05-05
在做網(wǎng)站的開發(fā)過程中，可能需要使用彈出層，使用jquery的blockui插件可以很輕松的實現(xiàn)這個效果。2011-04-04
下面小編就為大家?guī)硪黄猨query 中toggle的2種用法詳解(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
jQuery禁用快捷鍵例如禁用F5刷新 禁用右鍵菜單等的簡單實現(xiàn)
下面小編就為大家?guī)硪黄猨Query禁用快捷鍵例如禁用F5刷新 禁用右鍵菜單等的簡單實現(xiàn)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
利用選擇器，選擇要被操作的html中的元素。2010-02-02
jQuery使用ajax方法解析返回的json數(shù)據(jù)功能示例
這篇文章主要介紹了jQuery使用ajax方法解析返回的json數(shù)據(jù)功能,結(jié)合實例形式分析了jQuery ajax操作流程及json數(shù)據(jù)處理技巧,需要的朋友可以參考下2017-01-01