JavaScript総合:表を描く、セルを結合する、右クリックメニュー、モードウィンドウ、バブルウィンドウ

44945 ワード
セルの結合 右クリックメニュー モードウィンドウ 表をかく バブルウィンドウ
index.

  
  
  
  
    
   
   
   
   
  1. <html> 
    2. 
   
   
   
   
  2. <head> 
    3. 
   
   
   
   
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
    4. 
   
   
   
   
  4. <title>    </title> 
    5. 
   
   
   
   
  5. <!--    --> 
    6. 
   
   
   
   
  6. <script> 
    7. 
   
   
   
   
  7.     //      
    8. 
   
   
   
   
  8.     function showDialog1(){      
    9. 
   
   
   
   
  9.         omenu.style.left = -100;         
    10. 
   
   
   
   
  10.         omenu.style.top = -100;      
    11. 
   
   
   
   
  11.         var ijson = window.showModalDialog('  .html',window,'dialogWidth:400px;dialogHeight:400px');         
    12. 
   
   
   
   
  12.         var oimg = document.createElement("img");            
    13. 
   
   
   
   
  13.         oimg.inum=ijson.inum;        
    14. 
   
   
   
   
  14.         oimg.iname=ijson.iname;   
    15. 
   
   
   
   
  15.         if(ijson.itype=="1"){     
    16. 
   
   
   
   
  16.             oimg.itype="   ";  
    17. 
   
   
   
   
  17.             oimg.src="img/   .jpg";   
    18. 
   
   
   
   
  18.         }  
    19. 
   
   
   
   
  19.         else if(ijson.itype=="2"){     
    20. 
   
   
   
   
  20.             oimg.itype="  ";  
    21. 
   
   
   
   
  21.             oimg.src="img/  .jpg";    
    22. 
   
   
   
   
  22.         }  
    23. 
   
   
   
   
  23.         else if(ijson.itype=="3"){     
    24. 
   
   
   
   
  24.             oimg.itype="  ";  
    25. 
   
   
   
   
  25.             oimg.src="img/  .jpg";    
    26. 
   
   
   
   
  26.         }        
    27. 
   
   
   
   
  27.         oimg.imoney=ijson.imoney;        
    28. 
   
   
   
   
  28.         oimg.title="  ："+oimg.inum+"
    "+"  ："+oimg.iname+"
    "+"  ："+oimg.itype+"
    "+"  ："+oimg.imoney+"
    ";                 
    29. 
   
   
   
   
  29.         objTD.appendChild(oimg);  
    30. 
   
   
   
   
  30.         objTD.leftclick="false";  
    31. 
   
   
   
   
  31.     }  
    32. 
   
   
   
   
  32.     //      
    33. 
   
   
   
   
  33.     function showDialog2(){  
    34. 
   
   
   
   
  34.         omenu.style.left = -100;         
    35. 
   
   
   
   
  35.         omenu.style.top = -100;  
    36. 
   
   
   
   
  36.         var ijson = window.showModalDialog('  .html',objTD,'dialogWidth:400px;dialogHeight:400px');  
    37. 
   
   
   
   
  37.         objTD.childNodes[0].inum=ijson.inum;  
    38. 
   
   
   
   
  38.         objTD.childNodes[0].iname=ijson.iname;  
    39. 
   
   
   
   
  39.         objTD.childNodes[0].itype=ijson.itype;  
    40. 
   
   
   
   
  40.         objTD.childNodes[0].imoney=ijson.imoney;  
    41. 
   
   
   
   
  41.         objTD.childNodes[0].title="  ："+objTD.childNodes[0].inum+"
    "+"  ："+objTD.childNodes[0].iname+"
    "+"  ："+objTD.childNodes[0].itype+"
    "+"  ："+objTD.childNodes[0].imoney+"
    ";       
    42. 
   
   
   
   
  42.     }  
    43. 
   
   
   
   
  43.     //      
    44. 
   
   
   
   
  44.     function showDialog3(){  
    45. 
   
   
   
   
  45.         omenu.style.left = -100;  
    46. 
   
   
   
   
  46.         omenu.style.top = -100;  
    47. 
   
   
   
   
  47.         var formula = window.showModalDialog('  .html',window,'dialogWidth:400px;dialogHeight:400px');  
    48. 
   
   
   
   
  48.         if(formula!=""){  
    49. 
   
   
   
   
  49.             document.getElementById("formula").innerHTML="  ："+formula;  
    50. 
   
   
   
   
  50.             objTD.childNodes[0].imoney = (eval(formula.replace(/a/,objTD.childNodes[0].imoney)));  
    51. 
   
   
   
   
  51.             objTD.childNodes[0].title="  ："+objTD.childNodes[0].inum+"
    "+"  ："+objTD.childNodes[0].iname+"
    "+"  ："+objTD.childNodes[0].itype+"
    "+"  ："+objTD.childNodes[0].imoney+"
    ";  
    52. 
   
   
   
   
  52.         }  
    53. 
   
   
   
   
  53.     }  
    54. 
   
   
   
   
  54.     //      
    55. 
   
   
   
   
  55.     function del(){  
    56. 
   
   
   
   
  56.         objTD.removeChild(objTD.childNodes[0]);  
    57. 
   
   
   
   
  57.         objTD.rightclick="true";  
    58. 
   
   
   
   
  58.         objTD.leftclick="true";  
    59. 
   
   
   
   
  59.         objTD.style.backgroundColor="";  
    60. 
   
   
   
   
  60.     }  
    61. 
   
   
   
   
  61.     //      
    62. 
   
   
   
   
  62.     function rent(){  
    63. 
   
   
   
   
  63.         omenu.style.left = -100;  
    64. 
   
   
   
   
  64.         omenu.style.top = -100;  
    65. 
   
   
   
   
  65.         objTD.style.backgroundColor='#999999';  
    66. 
   
   
   
   
  66.         objTD.leftclick="false";  
    67. 
   
   
   
   
  67.     }  
    68. 
   
   
   
   
  68.  
    69. 
   
   
   
   
  69.     //             
    70. 
   
   
   
   
  70.     function draw(){  
    71. 
   
   
   
   
  71.         if(document.getElementById("rowNum").value==""){  
    72. 
   
   
   
   
  72.                 alert("   !");  
    73. 
   
   
   
   
  73.             return false;  
    74. 
   
   
   
   
  74.         }  
    75. 
   
   
   
   
  75.         else if(isNaN(document.getElementById("rowNum").value)){  
    76. 
   
   
   
   
  76.             alert("    !");  
    77. 
   
   
   
   
  77.                 return false;  
    78. 
   
   
   
   
  78.         }  
    79. 
   
   
   
   
  79.         else if(document.getElementById("colNum").value==""){  
    80. 
   
   
   
   
  80.                 alert("   !");  
    81. 
   
   
   
   
  81.                 return false;  
    82. 
   
   
   
   
  82.         }  
    83. 
   
   
   
   
  83.         else if(isNaN(document.getElementById("colNum").value)){  
    84. 
   
   
   
   
  84.                 alert("    !");  
    85. 
   
   
   
   
  85.                 return false;  
    86. 
   
   
   
   
  86.         }  
    87. 
   
   
   
   
  87.         var row=document.getElementById("rowNum").value;  
    88. 
   
   
   
   
  88.         var col=document.getElementById("colNum").value;  
    89. 
   
   
   
   
  89.         s="<table id='table1' border='1' cellpadding='0' cellspacing='0' ";  
    90. 
   
   
   
   
  90.         s+="style='border-collapse:collapse' oncontextmenu=window.event.returnValue=false>";  
    91. 
   
   
   
   
  91.         for(var i=0;i<row;i++){  
    92. 
   
   
   
   
  92.             ss=s+"<tr>";  
    93. 
   
   
   
   
  93.             for(var j=0;j<col;j++){  
    94. 
   
   
   
   
  94.                 ss=s+"<td onclick='fun_onclick(this);' onmousedown='showMenu(this);'style='width:50px; height:50px' rightclick='true' leftclick='true'></td>";  
    95. 
   
   
   
   
  95.             }  
    96. 
   
   
   
   
  96.             ss=s+"</tr>";  
    97. 
   
   
   
   
  97.          }  
    98. 
   
   
   
   
  98.          ss=s+"</table>";  
    99. 
   
   
   
   
  99.          tables.innerHTML=s;  
    100. 
   
   
   
   
  100.     }  
    101. 
   
   
   
   
  101.  
    102. 
   
   
   
   
  102.     var x1;  
    103. 
   
   
   
   
  103.     var x2;  
    104. 
   
   
   
   
  104.     var first = true;  
    105. 
   
   
   
   
  105.     var objTD;   
    106. 
   
   
   
   
  106.     var omenu;  
    107. 
   
   
   
   
  107.     //           
    108. 
   
   
   
   
  108.     function fun_  
    109. 
   
   
   
   
  109.         if(obj.leftclick=="true"){  
    110. 
   
   
   
   
  110.             if(first){  
    111. 
   
   
   
   
  111.                 first = false;  
    112. 
   
   
   
   
  112.                 x1=obj;  
    113. 
   
   
   
   
  113.             }  
    114. 
   
   
   
   
  114.             else{  
    115. 
   
   
   
   
  115.                 first = true;  
    116. 
   
   
   
   
  116.                 x2=obj;  
    117. 
   
   
   
   
  117.             }         
    118. 
   
   
   
   
  118.             obj.style.backgroundColor='#0000ff';  
    119. 
   
   
   
   
  119.             obj.rightclick = "false";  
    120. 
   
   
   
   
  120.         }  
    121. 
   
   
   
   
  121.     }  
    122. 
   
   
   
   
  122.  
    123. 
   
   
   
   
  123.     function rebulid(){   
    124. 
   
   
   
   
  124.         //             
    125. 
   
   
   
   
  125.         x1.style.border="0";  
    126. 
   
   
   
   
  126.         x2.style.border="0";    　　　  
    127. 
   
   
   
   
  127.     }  
    128. 
   
   
   
   
  128.       
    129. 
   
   
   
   
  129.     //       
    130. 
   
   
   
   
  130.     function  showMenu(obj){          
    131. 
   
   
   
   
  131.         omenu = document.getElementById("main_menu");  
    132. 
   
   
   
   
  132.         if(window.event.button == 2 && obj.rightclick=="true"){   
    133. 
   
   
   
   
  133.             objobjTD = obj;      
    134. 
   
   
   
   
  134.             omenu.style.left = event.x;  
    135. 
   
   
   
   
  135.             omenu.style.top = event.y;  
    136. 
   
   
   
   
  136.         }  
    137. 
   
   
   
   
  137.         else{  
    138. 
   
   
   
   
  138.             omenu.style.left = -100;  
    139. 
   
   
   
   
  139.             omenu.style.top = -100;  
    140. 
   
   
   
   
  140.         }  
    141. 
   
   
   
   
  141.     }  
    142. 
   
   
   
   
  142.       
    143. 
   
   
   
   
  143. </script> 
    144. 
   
   
   
   
  144. </head> 
    145. 
   
   
   
   
  145. <body> 
    146. 
   
   
   
   
  146.  
    147. 
   
   
   
   
  147. <div > 
    148. 
   
   
   
   
  148.  ：<input id="rowNum" type="text"/> 
    149. 
   
   
   
   
  149.  ：<input id="colNum" type="text"/> 
    150. 
   
   
   
   
  150. <input id="Button1" type="button" value="    "  onclick="draw()" /> 
    151. 
   
   
   
   
  151. <input id="Button2" type="button" value="     "  onclick="rebulid()" /> 
    152. 
   
   
   
   
  152. </div> 
    153. 
   
   
   
   
  153. <div id="formula" ></div> 
    154. 
   
   
   
   
  154. <br/> 
    155. 
   
   
   
   
  155.  
    156. 
   
   
   
   
  156. <span id="tables"></span> 
    157. 
   
   
   
   
  157. <div id="main_menu"   
    158. 
   
   
   
   
  158. style="position:absolute; background-color:#999999; left:-100px; top:-100px; width:80px; height:200px;"> 
    159. 
   
   
   
   
  159. <div onClick="showDialog1()">&nbsp;  </div> 
    160. 
   
   
   
   
  160. <br /> 
    161. 
   
   
   
   
  161. <div onClick="showDialog2()">&nbsp;  </div> 
    162. 
   
   
   
   
  162. <br /> 
    163. 
   
   
   
   
  163. <div onClick="del()">&nbsp;  </div> 
    164. 
   
   
   
   
  164. <br /> 
    165. 
   
   
   
   
  165. <div  onClick="showDialog3()">&nbsp;  </div> 
    166. 
   
   
   
   
  166. <br /> 
    167. 
   
   
   
   
  167. <div onClick="rent()">&nbsp;  </div> 
    168. 
   
   
   
   
  168. </div> 
    169. 
   
   
   
   
  169. <div> 
    170. 
   
   
   
   
  170. <img title="123" style="position:absolute;left:-100px; top:-100px"/> 
    171. 
   
   
   
   
  171. </div> 
    172. 
   
   
   
   
  172. </body> 
    173. 
   
   
   
   
  173. </html> 
    174.
作成.

  
  
  
  
    
   
   
   
   
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    2. 
   
   
   
   
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
    3. 
   
   
   
   
  3. <head> 
    4. 
   
   
   
   
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
    5. 
   
   
   
   
  5. <title>      </title> 
    6. 
   
   
   
   
  6. <script language="javascript" type="text/javascript"> 
    7. 
   
   
   
   
  7.     function fun1()  
    8. 
   
   
   
   
  8.     {  
    9. 
   
   
   
   
  9.         var ijson = {};  
    10. 
   
   
   
   
  10.         ijson.inum = document.form1.inum.value;  
    11. 
   
   
   
   
  11.         ijson.iname = document.form1.iname.value;  
    12. 
   
   
   
   
  12.         ijson.itype = document.getElementById("itype").value;  
    13. 
   
   
   
   
  13.         ijson.imoney = document.form1.imoney.value;  
    14. 
   
   
   
   
  14.         parent.window.returnValue=ijson; //        
    15. 
   
   
   
   
  15.         window.close();  
    16. 
   
   
   
   
  16.     }  
    17. 
   
   
   
   
  17. </script> 
    18. 
   
   
   
   
  18. </head> 
    19. 
   
   
   
   
  19.  
    20. 
   
   
   
   
  20. <body> 
    21. 
   
   
   
   
  21. <form name="form1" action="" > 
    22. 
   
   
   
   
  22.   ：<input type="text" name="inum"/><br /> 
    23. 
   
   
   
   
  23.   ：<input type="text" name="iname"/><br /> 
    24. 
   
   
   
   
  24.   ：<select id="itype" > 
    25. 
   
   
   
   
  25. <option value="0" >---   ---</option> 
    26. 
   
   
   
   
  26. <option value="1" >   </option> 
    27. 
   
   
   
   
  27. <option value="2" >  </option> 
    28. 
   
   
   
   
  28. <option value="3" >  </option> 
    29. 
   
   
   
   
  29. </select><br /> 
    30. 
   
   
   
   
  30.   ：<input type="text" name="imoney"/><br /> 
    31. 
   
   
   
   
  31. <input id="Button1" type="button" value="  " onclick="fun1();"/> 
    32. 
   
   
   
   
  32. <input id="Button2" type="button" value="  " onclick="window.close();" /> 
    33. 
   
   
   
   
  33. </form> 
    34. 
   
   
   
   
  34. </body> 
    35. 
   
   
   
   
  35. </html> 
    36.
編集.

  
  
  
  
    
   
   
   
   
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    2. 
   
   
   
   
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
    3. 
   
   
   
   
  3. <head> 
    4. 
   
   
   
   
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
    5. 
   
   
   
   
  5. <title>      </title> 
    6. 
   
   
   
   
  6. <script> 
    7. 
   
   
   
   
  7. window.onload=function(){  
    8. 
   
   
   
   
  8.     var txts = document.getElementsByTagName("input");  
    9. 
   
   
   
   
  9.     txts[0].value=window.dialogArguments.childNodes[0].inum;  
    10. 
   
   
   
   
  10.     txts[1].value=window.dialogArguments.childNodes[0].iname;  
    11. 
   
   
   
   
  11.     txts[2].value=window.dialogArguments.childNodes[0].itype;  
    12. 
   
   
   
   
  12.     txts[3].value=window.dialogArguments.childNodes[0].imoney;  
    13. 
   
   
   
   
  13. }  
    14. 
   
   
   
   
  14. function fun1(){  
    15. 
   
   
   
   
  15.     var ijson = {};  
    16. 
   
   
   
   
  16.     ijson.inum = document.form1.inum.value;  
    17. 
   
   
   
   
  17.     ijson.iname = document.form1.iname.value;  
    18. 
   
   
   
   
  18.     ijson.itype = document.form1.itype.value;  
    19. 
   
   
   
   
  19.     ijson.imoney = document.form1.imoney.value;  
    20. 
   
   
   
   
  20.     parent.window.returnValue=ijson; //        
    21. 
   
   
   
   
  21.     window.close();  
    22. 
   
   
   
   
  22. }  
    23. 
   
   
   
   
  23. </script> 
    24. 
   
   
   
   
  24. </head> 
    25. 
   
   
   
   
  25.  
    26. 
   
   
   
   
  26. <body> 
    27. 
   
   
   
   
  27. <form name="form1" action="" > 
    28. 
   
   
   
   
  28.   ：<input name="inum"   type="text"  readonly="true" onclick="alert('      ');"/><br /> 
    29. 
   
   
   
   
  29.   ：<input name="iname"  type="text"  /><br /> 
    30. 
   
   
   
   
  30.   ：<input name="itype"  type="text"  /><br /> 
    31. 
   
   
   
   
  31.   ：<input name="imoney" type="text"  /><br /> 
    32. 
   
   
   
   
  32. <input id="Button1" type="button" value="  " onclick="fun1();"/> 
    33. 
   
   
   
   
  33. <input id="Button2" type="button" value="  " onclick="window.close();" /> 
    34. 
   
   
   
   
  34. </form> 
    35. 
   
   
   
   
  35. </body> 
    36. 
   
   
   
   
  36. </html> 
    37.
設定.

  
  
  
  
    
   
   
   
   
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    2. 
   
   
   
   
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
    3. 
   
   
   
   
  3. <head> 
    4. 
   
   
   
   
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
    5. 
   
   
   
   
  5. <title>      </title> 
    6. 
   
   
   
   
  6. <script language="javascript" type="text/javascript"> 
    7. 
   
   
   
   
  7.     function fun1()  
    8. 
   
   
   
   
  8.     {  
    9. 
   
   
   
   
  9.         var formula = document.form1.formula.value;  
    10. 
   
   
   
   
  10.         parent.window.returnValue=formula; //        
    11. 
   
   
   
   
  11.        window.close();  
    12. 
   
   
   
   
  12.     }  
    13. 
   
   
   
   
  13. </script> 
    14. 
   
   
   
   
  14. </head> 
    15. 
   
   
   
   
  15.  
    16. 
   
   
   
   
  16. <body> 
    17. 
   
   
   
   
  17. <form name="form1" action="">   
    18. 
   
   
   
   
  18.      ：<input type="text" name="formula"><br /> 
    19. 
   
   
   
   
  19. <input id="Button1" type="button" value="  " onclick="fun1();" /> 
    20. 
   
   
   
   
  20. <input id="Button2" type="button" value="  " onclick="window.close();" /> 
    21. 
   
   
   
   
  21. </form> 
    22. 
   
   
   
   
  22. </body> 
    23. 
   
   
   
   
  23. </html> 
    24.
Spark Schedulerモジュール(上)