用js模仿word格式刷功能实现代码 [推荐]_javascript技巧-js教程-PHP中文网

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

WBOY

发布： 2016-05-16 18:49:18

原创

1982 人浏览过

<title>Format Brush</title> 
 
<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> 
 
<div> 
<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> <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

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

]<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>