用js模仿word格式刷功能实现代码 [推荐]

ttx9n · 发表于 2009-7-23 23:08:41

非常不错的模仿word格式刷实现代码。推荐大家参考下思路。

<html> 
<head> 
<title>Format Brush</title> 
</head> 
<style> 
table{ 
border: solid #ccc 1px; 
} 
td{ 
border: solid #ccc 1px; 
width: 140px; 
height: 25px; 
} 
.selected{ 
border: solid red 1px; 
} 
a{ 
text-decoration: none; 
color: black; 
font-weight: bold; 
} 
.b{ 
} 
.i{ 
font-style: italic; 
} 
.u{ 
text-decoration: underline; 
} 
.s{ 
text-decoration: line-through; 
} 
.r{ 
color: red; 
} 
</style> 
<body> 
 
<a href="javascript:setBold();" class='b'>B</a>    
<a href="javascript:setItalic();" class="i">I</a>    
<a href="javascript:setUnderline();" class="u">U</a>    
<a href="javascript:setLineThrough();" class="s">S</a>    
<a href="javascript:setRedColor();" class="r">R</a>    
<a href="javascript:doBrush(this);" class="">Brush</a> 再次点击Brush以结束使用格式刷 
 
<table id='t' cellpadding='0' cellspacing='0' border='1'> 
<tr><td class="selected">column1</td><td>column2</td><td>column3</td><td>column4</td></tr> 
<tr><td>column1</td><td>column2</td><td>column3</td><td>column4</td></tr> 
<tr><td>column1</td><td>column2</td><td>column3</td><td>column4</td></tr> 
<tr><td>column1</td><td>column2</td><td>column3</td><td>column4</td></tr> 
<tr><td>column1</td><td>column2</td><td>column3</td><td>column4</td></tr> 
<tr><td>column1</td><td>column2</td><td>column3</td><td>column4</td></tr> 
<tr><td>column1</td><td>column2</td><td>column3</td><td>column4</td></tr> 
</table>

用法：上下左右键移动单元格， 点格式化按扭格式化当前单元格， 
 
点Brush准备使用格式刷，然后点任意单元格就会把当前单元格格式拷贝到被点击的单元格。

转载请注明来自：http://blog.csdn.net/sunxing007 
</body> 
<script> 
//辅助函数 
function $(id){return document.getElementById(id);} 
var tb = $('t'); 
var selectedCell = tb.rows[0].cells[0];//当前被选择的单元格。 
var brushing = false;//是否正在使用刷子 
function setBold(){ 
selectedCell.style.fontWeight = "bold"; 
} 
function setItalic(){ 
selectedCell.style.fontStyle = "italic"; 
} 
function setUnderline(){ 
selectedCell.style.textDecoration = "underline"; 
} 
function setLineThrough(){ 
selectedCell.style.textDecoration = "line-through"; 
} 
function setRedColor(){ 
selectedCell.style.color = "red"; 
} 
//格式拷贝 
function copyFormat(source, dist){ 
dist.style.fontWeight = source.style.fontWeight; 
dist.style.fontStyle = source.style.fontStyle; 
dist.style.textDecoration = source.style.textDecoration; 
dist.style.color = source.style.color; 
} 
function doBrush(e){ 
if(!brushing){ 
$('tip').style.display = ''; 
} 
else{ 
$('tip').style.display = 'none'; 
} 
brushing = !brushing; 
} 
document.onkeydown=function(){ 
window.status = event.keyCode; 
switch(event.keyCode){ 
case 37: { 
moveLeft(); 
break; 
} 
case 38: { 
moveUp(); 
break; 
} 
case 39: { 
moveRight(); 
break; 
} 
case 40: { 
moveDown(); 
break; 
} 
} 
} 
function moveLeft(){ 
if(selectedCell&&selectedCell.previousSibling){ 
selectedCell.className=''; 
selectedCell = selectedCell.previousSibling; 
selectedCell.className = 'selected'; 
} 
} 
function moveRight(){ 
if(selectedCell&&selectedCell.nextSibling){ 
selectedCell.className=''; 
selectedCell = selectedCell.nextSibling; 
selectedCell.className = 'selected'; 
} 
} 
function moveUp(){ 
if(selectedCell&&selectedCell.parentNode&&selectedCell.parentNode.previousSibling){ 
selectedCell.className=''; 
var _index = selectedCell.cellIndex; 
selectedCell = selectedCell.parentNode.previousSibling.cells[_index]; 
selectedCell.className = 'selected'; 
} 
} 
function moveDown(){ 
if(selectedCell&&selectedCell.parentNode&&selectedCell.parentNode.nextSibling){ 
selectedCell.className=''; 
var _index = selectedCell.cellIndex; 
selectedCell = selectedCell.parentNode.nextSibling.cells[_index]; 
selectedCell.className = 'selected'; 
} 
} 
document.body.onload = function(){ 
for(var i=0; i<tb.rows.length; i++){ 
for(var j=0; j<tb.rows<i>.cells.length; j++){ 
tb.rows<i>.cells[j].onclick = function(){ 
if(brushing){ 
copyFormat(selectedCell, this); 
} 
}; 
} 
} 
} 
</script> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

gyalp · 发表于 2022-10-15 04:17:28

不错的源码论坛

i3x3r3 · 发表于 2023-3-10 16:37:34

大家都不容易！

kestlhoxn · 发表于 2023-7-16 23:15:58

哟哟哟哟哟以偶

fzyzy · 发表于 2023-7-24 21:05:48

554411515451555

lba36h7g · 发表于 2023-9-21 03:34:33

源码源码源码源码源码源码源码源码源码源码源码源码源码

czoz5y · 发表于 2023-9-27 08:35:51

数据库了多久撒快乐的健身卡啦

4k0mp7m · 发表于 2023-10-8 06:18:12

源码源码源码源码源码源码源码源码源码源码源码源码源码

adm1n · 发表于 2024-5-19 14:18:44

强烈支持楼主ing……

sykzus · 发表于 2024-6-16 11:20:15

天天源码社区。。。。

账号		自动登录	找回密码
密码			立即注册

[JavaScript] 用js模仿word格式刷功能实现代码 [推荐]

相关帖子