JavaScript 编程开发中单元选择合并变色示例代码
程序员文章站
2022-06-09 08:27:07
代码如下:
the document titl...</div>
<div class="content">
<p>代码如下:</p>
<p class="codebody" id="code62156"><br>
<!doctype html><br>
<html><br>
<head><br>
<title>the document title</title><br>
<meta charset=utf-8><br>
<script src="lib/jquery-1.8.1.min.js" type="text/javascript"></script><br>
<style type="text/css"><br>
table{<br>
border-spacing: 0;<br>
}<br>
td{<br>
height: 50px;<br>
width: 50px;<br>
border-spacing: 0;<br>
}<br>
.hidden{<br>
display: none;<br>
}<br>
</style><br>
</head><br><br>
<body><br>
<table border="1"><br>
<tr id ="r1"><br>
<td></td><br>
<td></td><br>
<td></td><br>
<td></td><br>
<td></td><br>
<td></td><br>
<td></td><br>
<td></td><br>
<td></td><br>
<td></td><br>
</tr><br>
<tr id ="r2"><br>
<td></td><br>
<td></td><br>
<td></td><br>
<td></td><br>
<td></td><br>
<td></td><br>
<td></td><br>
<td></td><br>
<td></td><br>
<td></td><br>
</tr><br>
</table><br>
<p id ='log'></p><br>
<button type="button" onclick="combine()">hebing</button><br>
<script type="text/javascript"><br>
var selectecdlog = [];<br>
var resultlen = 0;<br>
var resultbegin = 0;<br>
var backcolor = ['red','green','blue']; // assume 3 rows 1 -red 2 - green 3 - blue<br>
var resultcolor =0;<br>
$("td").mousedown(function() {<br>
selectecdlog = [];<br>
resultcolor = backcolor[$(this).parent().attr('id').substr(1)-1];<br>
$('td').css('background-color', 'white');<br>
// id for tr tag<br>
//alert($(this).parent().attr('id'));<br>
//get the column no.<br>
//alert($(this).index()+1);<br>
$(this).css('background-color', resultcolor);<br>
selectecdlog.push($(this).attr('id'));<br>
//alert($(this).attr('id'));<br>
$("td").mouseup(onmouseup);<br>
$("td").mouver(onmouseover);<br>
})<br>
function onmouseup(){<br>
/* act on the event */<br>
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;<br>
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));<br>
for(var i =0; i<resultlen;i++)<br>
{<br>
selectecdlog.push(selectecdlog[0].substr(0,2)+"c"+(resultbegin+i));<br><br>
}<br>
selectecdlog.shift();<br>
$('#log').text(selectecdlog.tostring());<br><br>
$("td").unbind('mouseover',onmouseover);<br>
$("td").unbind('mouseup',onmouseup);<br>
}<br>
function onmouseover (argument) {<br>
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;<br>
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));<br>
$('td').css('background-color', 'white');<br>
for(var i =0; i<len;i++)<br>
{<br>
$('#'+selectecdlog[0].substr(0,2)+"c"+(begin+i)).css('background-color', resultcolor);<br>
}<br>
//alert( $(this).attr('id').substr(($(this).attr('id').indexof('c'))+1));<br>
//$('#'+tdid).css('background-color', 'red');<br>
}<br>
// set id attr for each td<br>
$("td").each(function(index, val){<br>
/* iterate through array or object */<br>
$(this).attr('id', $(this).parent().attr('id')+"c"+($(this).index()+1))});<br>
//combine cells<br>
function combine (argument) {<br>
// body...<br>
for (var m in selectecdlog)<br>
{<br>
if(m==0)<br>
{<br>
$('#'+selectecdlog[m]).attr('colspan', resultlen);<br>
$('#'+selectecdlog[m]).css('width',resultlen*50+"px");<br>
//$('#'+selectecdlog[m]).css('background-color', 'bule');<br>
}<br>
else{<br>
$('#'+selectecdlog[m]).addclass('hidden');<br>
}<br>
}<br>
}<br>
</script><br>
</body><br>
</html></p> </div>
<div class="info-pre-next">
<p>
上一篇： <a href="/article/1321467.html">
PHP 内存缓存加速功能memcached安装与用法 </a>
</p>
<p>
下一篇： <a href="/article/1321469.html">
Linux系统下强大的lsof命令使用宝典 </a>
</p>
</div>
<div class="wz_tuijian">
<p>
推荐阅读 </p>
<ul>
<li>
<a href="/article/2071997.html" target="_blank" title="JavaScript 编程开发中单元选择合并变色示例代码">
<h2>
JavaScript 编程开发中单元选择合并变色示例代码 </h2>
</a>
</li>
<li>
<a href="/article/1691192.html" target="_blank" title="JavaScript开发中div模拟选择框示例代码">
<h2>
JavaScript开发中div模拟选择框示例代码 </h2>
</a>
</li>
<li>
<a href="/article/1321468.html" target="_blank" title="JavaScript 编程开发中单元选择合并变色示例代码">
<h2>
JavaScript 编程开发中单元选择合并变色示例代码 </h2>
</a>
</li>
<li>
<a href="/article/1182866.html" target="_blank" title="JavaScript编程开发中jquery访问ashx文件示例代码">
<h2>
JavaScript编程开发中jquery访问ashx文件示例代码 </h2>
</a>
</li>
<li>
<a href="/article/990951.html" target="_blank" title="单元选择合并变色示例代码_jquery">
<h2>
单元选择合并变色示例代码_jquery </h2>
</a>
</li>
<li>
<a href="/article/882606.html" target="_blank" title="JavaScript开发中div模拟选择框示例代码">
<h2>
JavaScript开发中div模拟选择框示例代码 </h2>
</a>
</li>
<li>
<a href="/article/843036.html" target="_blank" title="单元选择合并变色示例代码_jquery">
<h2>
单元选择合并变色示例代码_jquery </h2>
</a>
</li>
</ul>
</div>
</article>
</div>
</main>
<footer><div class="box"><div class="ft_nav"><div class="ft_about"><p>关于网站</p><ul><li><a href="/sitemap.xml" target="_blank" title="网站地图">网站地图</a></li><li><a href="/list/2/" title="最新程序员文章站">最新程序员文章站</a></li></ul></div><div class="ft_contact"><ul><li>本站所有数据收集于网络如有侵犯到您的权益，请联系我们进行下架处理。</li><li class="email_show"></li></ul></div></div><div class="copyright"><div class="cr_left"><p> 备案号：<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20058927号</a></p><p>© Copyright © 2020-2022 www.superweb999.com 程序员文章站. </p></div></div></div></footer> </body>
</html>