用js模仿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> 
<div> 
<a href="javascript:setBold();" _ewebeditor_ta_href="javascript%3AsetBold()%3B" class='b'>B</a>    
<a href="javascript:setItalic();" _ewebeditor_ta_href="javascript%3AsetItalic()%3B" class="i">I</a>    
<a href="javascript:setUnderline();" _ewebeditor_ta_href="javascript%3AsetUnderline()%3B" class="u">U</a>    
<a href="javascript:setLineThrough();" _ewebeditor_ta_href="javascript%3AsetLineThrough()%3B" class="s">S</a>    
<a href="javascript:setRedColor();" _ewebeditor_ta_href="javascript%3AsetRedColor()%3B" class="r">R</a>    
<a href="javascript:doBrush(this);" _ewebeditor_ta_href="javascript%3AdoBrush(this)%3B" class="">Brush</a> <span id="tip" style="display: none;">再次点击Brush以结束使用格式刷</span> 
</div> 
<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> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%3E%20%0D%0A%2F%2F%E8%BE%85%E5%8A%A9%E5%87%BD%E6%95%B0%20%0D%0Afunction%20%24(id)%7Breturn%20document.getElementById(id)%3B%7D%20%0D%0Avar%20tb%20%3D%20%24('t')%3B%20%0D%0Avar%20selectedCell%20%3D%20tb.rows%5B0%5D.cells%5B0%5D%3B%2F%2F%E5%BD%93%E5%89%8D%E8%A2%AB%E9%80%89%E6%8B%A9%E7%9A%84%E5%8D%95%E5%85%83%E6%A0%BC%E3%80%82%20%0D%0Avar%20brushing%20%3D%20false%3B%2F%2F%E6%98%AF%E5%90%A6%E6%AD%A3%E5%9C%A8%E4%BD%BF%E7%94%A8%E5%88%B7%E5%AD%90%20%0D%0Afunction%20setBold()%7B%20%0D%0AselectedCell.style.fontWeight%20%3D%20%22bold%22%3B%20%0D%0A%7D%20%0D%0Afunction%20setItalic()%7B%20%0D%0AselectedCell.style.fontStyle%20%3D%20%22italic%22%3B%20%0D%0A%7D%20%0D%0Afunction%20setUnderline()%7B%20%0D%0AselectedCell.style.textDecoration%20%3D%20%22underline%22%3B%20%0D%0A%7D%20%0D%0Afunction%20setLineThrough()%7B%20%0D%0AselectedCell.style.textDecoration%20%3D%20%22line-through%22%3B%20%0D%0A%7D%20%0D%0Afunction%20setRedColor()%7B%20%0D%0AselectedCell.style.color%20%3D%20%22red%22%3B%20%0D%0A%7D%20%0D%0A%2F%2F%E6%A0%BC%E5%BC%8F%E6%8B%B7%E8%B4%9D%20%0D%0Afunction%20copyFormat(source%2C%20dist)%7B%20%0D%0Adist.style.fontWeight%20%3D%20source.style.fontWeight%3B%20%0D%0Adist.style.fontStyle%20%3D%20source.style.fontStyle%3B%20%0D%0Adist.style.textDecoration%20%3D%20source.style.textDecoration%3B%20%0D%0Adist.style.color%20%3D%20source.style.color%3B%20%0D%0A%7D%20%0D%0Afunction%20doBrush(e)%7B%20%0D%0Aif(!brushing)%7B%20%0D%0A%24('tip').style.display%20%3D%20''%3B%20%0D%0A%7D%20%0D%0Aelse%7B%20%0D%0A%24('tip').style.display%20%3D%20'none'%3B%20%0D%0A%7D%20%0D%0Abrushing%20%3D%20!brushing%3B%20%0D%0A%7D%20%0D%0Adocument.onkeydown%3Dfunction()%7B%20%0D%0Awindow.status%20%3D%20event.keyCode%3B%20%0D%0Aswitch(event.keyCode)%7B%20%0D%0Acase%2037%3A%20%7B%20%0D%0AmoveLeft()%3B%20%0D%0Abreak%3B%20%0D%0A%7D%20%0D%0Acase%2038%3A%20%7B%20%0D%0AmoveUp()%3B%20%0D%0Abreak%3B%20%0D%0A%7D%20%0D%0Acase%2039%3A%20%7B%20%0D%0AmoveRight()%3B%20%0D%0Abreak%3B%20%0D%0A%7D%20%0D%0Acase%2040%3A%20%7B%20%0D%0AmoveDown()%3B%20%0D%0Abreak%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Afunction%20moveLeft()%7B%20%0D%0Aif(selectedCell%26%26selectedCell.previousSibling)%7B%20%0D%0AselectedCell.className%3D''%3B%20%0D%0AselectedCell%20%3D%20selectedCell.previousSibling%3B%20%0D%0AselectedCell.className%20%3D%20'selected'%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Afunction%20moveRight()%7B%20%0D%0Aif(selectedCell%26%26selectedCell.nextSibling)%7B%20%0D%0AselectedCell.className%3D''%3B%20%0D%0AselectedCell%20%3D%20selectedCell.nextSibling%3B%20%0D%0AselectedCell.className%20%3D%20'selected'%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Afunction%20moveUp()%7B%20%0D%0Aif(selectedCell%26%26selectedCell.parentNode%26%26selectedCell.parentNode.previousSibling)%7B%20%0D%0AselectedCell.className%3D''%3B%20%0D%0Avar%20_index%20%3D%20selectedCell.cellIndex%3B%20%0D%0AselectedCell%20%3D%20selectedCell.parentNode.previousSibling.cells%5B_index%5D%3B%20%0D%0AselectedCell.className%20%3D%20'selected'%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Afunction%20moveDown()%7B%20%0D%0Aif(selectedCell%26%26selectedCell.parentNode%26%26selectedCell.parentNode.nextSibling)%7B%20%0D%0AselectedCell.className%3D''%3B%20%0D%0Avar%20_index%20%3D%20selectedCell.cellIndex%3B%20%0D%0AselectedCell%20%3D%20selectedCell.parentNode.nextSibling.cells%5B_index%5D%3B%20%0D%0AselectedCell.className%20%3D%20'selected'%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Adocument.body.onload%20%3D%20function()%7B%20%0D%0Afor(var%20i%3D0%3B%20i%3Ctb.rows.length%3B%20i%2B%2B)%7B%20%0D%0Afor(var%20j%3D0%3B%20j%3Ctb.rows%5Bi%5D.cells.length%3B%20j%2B%2B)%7B%20%0D%0Atb.rows%5Bi%5D.cells%5Bj%5D.onclick%20%3D%20function()%7B%20%0D%0Aif(brushing)%7B%20%0D%0AcopyFormat(selectedCell%2C%20this)%3B%20%0D%0A%7D%20%0D%0A%7D%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%3C%2Fscript%3E"> 
</html>

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

教程首页更多教程