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

时间:2020-05-12 人气:6

<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();" 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 
</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需刷新才能执行]

加载全部内容