用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>B    I    U    S    R    Brush <span id="tip" style="display: none;">再次点击Brush以结束使用格式刷</span><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需刷新才能执行]