JavaScript综合：画表格，合并单元格，右键菜单，模态窗口，气泡窗口
index.html
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <title>表格操作</title>
- <!--右键菜单-->
- <script>
- //创建菜单
- function showDialog1(){
- omenu.style.left = -100;
- omenu.style.top = -100;
- var ijson = window.showModalDialog('创建.html',window,'dialogWidth:400px;dialogHeight:400px');
- var oimg = document.createElement("img");
- oimg.inum=ijson.inum;
- oimg.iname=ijson.iname;
- if(ijson.itype=="1"){
- oimg.itype="写字间";
- oimg.src="img/写字间.jpg";
- }
- else if(ijson.itype=="2"){
- oimg.itype="档口";
- oimg.src="img/档口.jpg";
- }
- else if(ijson.itype=="3"){
- oimg.itype="摊场";
- oimg.src="img/摊场.jpg";
- }
- oimg.imoney=ijson.imoney;
- oimg.title="编号："+oimg.inum+"\n"+"名称："+oimg.iname+"\n"+"类型："+oimg.itype+"\n"+"租金："+oimg.imoney+"\n";
- objTD.appendChild(oimg);
- objTD.leftclick="false";
- }
- //编辑菜单
- function showDialog2(){
- omenu.style.left = -100;
- omenu.style.top = -100;
- var ijson = window.showModalDialog('编辑.html',objTD,'dialogWidth:400px;dialogHeight:400px');
- objTD.childNodes[0].inum=ijson.inum;
- objTD.childNodes[0].iname=ijson.iname;
- objTD.childNodes[0].itype=ijson.itype;
- objTD.childNodes[0].imoney=ijson.imoney;
- objTD.childNodes[0].title="编号："+objTD.childNodes[0].inum+"\n"+"名称："+objTD.childNodes[0].iname+"\n"+"类型："+objTD.childNodes[0].itype+"\n"+"租金："+objTD.childNodes[0].imoney+"\n";
- }
- //设置菜单
- function showDialog3(){
- omenu.style.left = -100;
- omenu.style.top = -100;
- var formula = window.showModalDialog('设置.html',window,'dialogWidth:400px;dialogHeight:400px');
- if(formula!=""){
- document.getElementById("formula").innerHTML="公式："+formula;
- objTD.childNodes[0].imoney = (eval(formula.replace(/a/,objTD.childNodes[0].imoney)));
- objTD.childNodes[0].title="编号："+objTD.childNodes[0].inum+"\n"+"名称："+objTD.childNodes[0].iname+"\n"+"类型："+objTD.childNodes[0].itype+"\n"+"租金："+objTD.childNodes[0].imoney+"\n";
- }
- }
- //删除菜单
- function del(){
- objTD.removeChild(objTD.childNodes[0]);
- objTD.rightclick="true";
- objTD.leftclick="true";
- objTD.style.backgroundColor="";
- }
- //租用菜单
- function rent(){
- omenu.style.left = -100;
- omenu.style.top = -100;
- objTD.style.backgroundColor='#999999';
- objTD.leftclick="false";
- }
- //画表格
- function draw(){
- if(document.getElementById("rowNum").value==""){
- alert("行非空!");
- return false;
- }
- else if(isNaN(document.getElementById("rowNum").value)){
- alert("行非字符!");
- return false;
- }
- else if(document.getElementById("colNum").value==""){
- alert("列非空!");
- return false;
- }
- else if(isNaN(document.getElementById("colNum").value)){
- alert("列非字符!");
- return false;
- }
- var row=document.getElementById("rowNum").value;
- var col=document.getElementById("colNum").value;
- s="<table id='table1' border='1' cellpadding='0' cellspacing='0' ";
- s+="style='border-collapse:collapse' oncontextmenu=window.event.returnValue=false>";
- for(var i=0;i<row;i++){
- ss=s+"<tr>";
- for(var j=0;j<col;j++){
- ss=s+"<td onclick='fun_onclick(this);' onmousedown='showMenu(this);'style='width:50px; height:50px' rightclick='true' leftclick='true'></td>";
- }
- ss=s+"</tr>";
- }
- ss=s+"</table>";
- tables.innerHTML=s;
- }
- var x1;
- var x2;
- var first = true;
- var objTD;
- var omenu;
- //单击选择单元格事件
- function fun_
- if(obj.leftclick=="true"){
- if(first){
- first = false;
- x1=obj;
- }
- else{
- first = true;
- x2=obj;
- }
- obj.style.backgroundColor='#0000ff';
- obj.rightclick = "false";
- }
- }
- function rebulid(){
- //设置要合并的单元格边框
- x1.style.border="0";
- x2.style.border="0";
- }
- //右键单元格
- function showMenu(obj){
- omenu = document.getElementById("main_menu");
- if(window.event.button == 2 && obj.rightclick=="true"){
- objobjTD = obj;
- omenu.style.left = event.x;
- omenu.style.top = event.y;
- }
- else{
- omenu.style.left = -100;
- omenu.style.top = -100;
- }
- }
- </script>
- </head>
- <body>
- <div >
- 行：<input id="rowNum" type="text"/>
- 列：<input id="colNum" type="text"/>
- <input id="Button1" type="button" value="绘制表格" onclick="draw()" />
- <input id="Button2" type="button" value="合并单元格" onclick="rebulid()" />
- </div>
- <div id="formula" ></div>
- <br/>
- <span id="tables"></span>
- <div id="main_menu"
- style="position:absolute; background-color:#999999; left:-100px; top:-100px; width:80px; height:200px;">
- <div onClick="showDialog1()"> 创建</div>
- <br />
- <div onClick="showDialog2()"> 编辑</div>
- <br />
- <div onClick="del()"> 删除</div>
- <br />
- <div onClick="showDialog3()"> 设置</div>
- <br />
- <div onClick="rent()"> 租用</div>
- </div>
- <div>
- <img title="123" style="position:absolute;left:-100px; top:-100px"/>
- </div>
- </body>
- </html>
创建.html
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <title>右键菜单创建</title>
- <script language="javascript" type="text/javascript">
- function fun1()
- {
- var ijson = {};
- ijson.inum = document.form1.inum.value;
- ijson.iname = document.form1.iname.value;
- ijson.itype = document.getElementById("itype").value;
- ijson.imoney = document.form1.imoney.value;
- parent.window.returnValue=ijson; //父窗口返回值
- window.close();
- }
- </script>
- </head>
- <body>
- <form name="form1" action="" >
- 编号：<input type="text" name="inum"/><br />
- 名称：<input type="text" name="iname"/><br />
- 类型：<select id="itype" >
- <option value="0" >---请选择---</option>
- <option value="1" >写字间</option>
- <option value="2" >档口</option>
- <option value="3" >摊场</option>
- </select><br />
- 租金：<input type="text" name="imoney"/><br />
- <input id="Button1" type="button" value="提交" onclick="fun1();"/>
- <input id="Button2" type="button" value="关闭" onclick="window.close();" />
- </form>
- </body>
- </html>
编辑.html
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <title>右键菜单编辑</title>
- <script>
- window.onload=function(){
- var txts = document.getElementsByTagName("input");
- txts[0].value=window.dialogArguments.childNodes[0].inum;
- txts[1].value=window.dialogArguments.childNodes[0].iname;
- txts[2].value=window.dialogArguments.childNodes[0].itype;
- txts[3].value=window.dialogArguments.childNodes[0].imoney;
- }
- function fun1(){
- var ijson = {};
- ijson.inum = document.form1.inum.value;
- ijson.iname = document.form1.iname.value;
- ijson.itype = document.form1.itype.value;
- ijson.imoney = document.form1.imoney.value;
- parent.window.returnValue=ijson; //父窗口返回值
- window.close();
- }
- </script>
- </head>
- <body>
- <form name="form1" action="" >
- 编号：<input name="inum" type="text" readonly="true" onclick="alert('编号不能修改');"/><br />
- 名称：<input name="iname" type="text" /><br />
- 类型：<input name="itype" type="text" /><br />
- 租金：<input name="imoney" type="text" /><br />
- <input id="Button1" type="button" value="提交" onclick="fun1();"/>
- <input id="Button2" type="button" value="关闭" onclick="window.close();" />
- </form>
- </body>
- </html>
设置.html
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <title>右键菜单设置</title>
- <script language="javascript" type="text/javascript">
- function fun1()
- {
- var formula = document.form1.formula.value;
- parent.window.returnValue=formula; //父窗口返回值
- window.close();
- }
- </script>
- </head>
- <body>
- <form name="form1" action="">
- 请输入公式：<input type="text" name="formula"><br />
- <input id="Button1" type="button" value="提交" onclick="fun1();" />
- <input id="Button2" type="button" value="关闭" onclick="window.close();" />
- </form>
- </body>
- </html>