01.<html>
02.<head>
03. <title></title>
04. <script>
05. var isMouseDown = false;
06. var sumValue = 0;
07.
08. function init(){
09. var tbObj = document.getElementsByTagName("table")
10. var tbNum = tbObj.length;
11.
12. for (i = 0;i < tbNum; i++){
13. var trObj = tbObj[i].getElementsByTagName('tr');
14. var trNum = trObj.length;
15. for (iTr = 0;iTr < trNum; iTr++){
16. var tdObj = trObj[iTr].getElementsByTagName('td');
17. for(iTd = 0;iTd < tdObj.length; iTd++)
18. {
19. tdObj[iTd].onmousedown = function(){f_mousedown(this)};
20. tdObj[iTd].onmouseover = function(){f_mouseover(this)};
21. tdObj[iTd].onmouseup = function(){f_mouseup()};
22. }
23. }
24. }
25. }
26.
27. function f_mousedown(obj){
28. isMouseDown = true;
29.
30. sumValue = parseInt(obj.innerText);
31. return false;
32. }
33.
34. function f_mouseover(obj){
35. if (isMouseDown == true){
36. obj.selected= 1;
37.
38.
39. sumValue += parseInt(obj.innerText);
40. window.status = sumValue;
41. }
42. }
43.
44. function f_mouseup(){
45. isMouseDown = false;
46. document.getElementById('calCells').value = sumValue;
47. window.status = "";
48. }
49. </script>
50. <style>
51. .highLighted{
52. background-color:whitesmoke;
53. }
54. </style>
55.</head>
56.<body onload="init()">
57. <table border="1" width ="50%">
58. <tr>
59. <td>1</td>
60. <td>2</td>
61. <td>3</td>
62. <td>4</td>
63. <td>5</td>
64. <td>6</td>
65. <td>7</td>
66. <td>8</td>
67. <td>9</td>
68. <td>10</td>
69. </tr>
70. <tr>
71. <td>1</td>
72. <td>2</td>
73. <td>3</td>
74. <td>4</td>
75. <td>5</td>
76. <td>6</td>
77. <td>7</td>
78. <td>8</td>
79. <td>9</td>
80. <td>10</td>
81. </tr>
82. </table>
83. <input type="text" id="calCells" value=""/>
84.</body>
85.</html>
