JavaScript综合：画表格，合并单元格，右键菜单，模态窗口，气泡窗口

原创

棉花糖TWO 2011-12-25 16:30:15 博主文章分类：JavaScript ©著作权

文章标签 右键菜单合并单元格画表格模态窗口气泡窗口 文章分类 Java 后端开发

©著作权归作者所有：来自51CTO博客作者棉花糖TWO的原创作品，请联系作者获取转载授权，否则将追究法律责任

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()">&nbsp;创建</div> 
<br /> 
<div onClick="showDialog2()">&nbsp;编辑</div> 
<br /> 
<div onClick="del()">&nbsp;删除</div> 
<br /> 
<div  onClick="showDialog3()">&nbsp;设置</div> 
<br /> 
<div onClick="rent()">&nbsp;租用</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>