js를 사용하여 단어 형식의 브러시 기능을 모방하여 코드 구현 [권장]_javascript 기술

<title>브러시 서식</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">ㄴ</a> <a href="javascript:setItalic();" class="i">나</a> <a href="javascript:setUnderline();" class="u">너</a> <a href="javascript:setLineThrough();" class="s">에</a> <a href="javascript:setRedColor();" class="r">르</a> <a href="javascript:doBrush(this);" class="">브러시</a> <span id="tip" style="display: none;">서식 브러시 사용을 종료하려면 다시 브러시를 클릭하세요</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> 사용법: 위, 아래, 왼쪽, 오른쪽 키를 사용하여 셀을 이동하고 서식 버튼을 클릭하여 현재 셀의 서식을 지정합니다. 브러시를 클릭하여 서식 브러시를 사용할 준비를 한 다음 아무 셀이나 클릭하여 현재 셀 서식을 클릭한 셀에 복사합니다. 재인쇄할 경우 출처를 명시해주세요: http://blog.csdn.net/sunxing007
[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다

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