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

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 用js模仿word格式刷功能实现代码 [推荐]

Javascript: 有趣的script标签用getAttribute方法来自脚本吧; 学习YUI.Ext 第二天; 学习YUI.Ext 第三天; 学习YUI.Ext第五日--做拖放Darg&Drop; 学习YUI.Ext 第六天--关于树TreePanel(Part 1); 学习YUI.Ext 第七天--关于View&JSONView; 学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点); 对YUI扩展的Gird组件 Part-2; Gird事件机制初级读本; 为Yahoo! UI Extensions Grid增加内置的可编辑器; 如何简单地用YUI做JavaScript动画; (function(){})()的用法与优点; JS层移支示例代码; 如何在Web页面上直接打开、编辑、创建Office文档; 网页中实现浏览器的最大，最小化和关闭按钮; [原创]js与自动伸缩图片自动缩小图片的多浏览器兼容的方法总结; 图片自动缩小的js代码,用以防止图片撑破页面; 收藏一些不常用，但是有用的代码; 解决 firefox 不支持 document.all的方法; 用ajax实现的自动投票的代码

No. « ‹ 55 56 57 58 › »

技术文章搜索

关键字

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

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 444 ::

收藏到网摘: n/a

JQuery CSS样式控制学习笔记运用jquery实现table单双行不同显示并能单行选中

非常不错的模仿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();" 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 全选提示:你可先修改部分代码,再按运行]

JQuery CSS样式控制学习笔记运用jquery实现table单双行不同显示并能单行选中

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

评论 (0) All

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