JS 动态生成表格

<!--
var currentobj;
/**
 * 显示选中的tab页,此处用到的样式都在style1.css中
 * @param selectedTab  <String>   被选中的tab的id值
 * @param areaIds      <String[]> tab对应显示页面id，与tabIds一一对应　
 * @param tabIds       <String[]> tab按钮id值，与areaIds一一对应　
 * @param otherElementsDisplay  <Array<String[]>>选中tab后对应的需要显示的其它类型的元素需要隐藏的元素id值:如按钮等
 */
function showinfo(selectedTab, areaIds, tabIds, otherElementsDisplay)
{
    //重置样式
    for(var c = 0; c < tabIds.length; c++)
    {
        window.document.getElementById(tabIds[c]).className="tdUnselect";
    }

    //将所有的设置为不可见
    if(areaIds != undefined)
    for(var c = 0; c < areaIds.length; c++)
    {
        window.document.getElementById(areaIds[c]).style.display="none";
    }

    //先将被隐藏的全部设置为显示
    if(otherElementsDisplay != undefined)
    for(var c = 0; c < otherElementsDisplay.length; c++)
    {
        var dd = otherElementsDisplay[c];
        if(dd != undefined)
        for(var i = 0; i < dd.length; i++)
        {
            window.document.getElementById(dd[i]).style.display="";
        }
    }

    //根据设置来显示
    //if(areaIds != undefined)
    for(var c = 0; c < tabIds.length; c++)
    {
        if(selectedTab==tabIds[c])
        {
            if(areaIds != undefined && areaIds[c] != undefined)
                window.document.getElementById(areaIds[c]).style.display="";
            //window.document.getElementById(tabIds[c]).style.backgroundColor="#5685CC";
            window.document.getElementById(tabIds[c]).className="tdSelect";
            var dd = otherElementsDisplay[c];
            //设置相关元素不可见
            if(dd != undefined)
            for(var i = 0; i < dd.length; i++)
            {
                window.document.getElementById(dd[i]).style.display="none";
            }
            currentobj=window.document.getElementById(tabIds[c]).id;
        }
    }
}
/**
 * 鼠标移到相应tab按钮时显示不同的样式来标识
 * @param obj1 tab按钮id
 */
function tdmouseOver(obj1)
{
    obj1.className="tdmouseOver";
}
/**
 * 鼠标移出相应tab按钮时恢复显示原来的样式
 * @param obj1 tab按钮id
 */
function tdmouseOut(obj2)
{
    var objout=obj2.id
    if(objout==currentobj)
    {
        obj2.className="tdSelect";
    }
    else
    {
        obj2.className="tdUnselect";
    }
}
//-->
 //  flag:1 代表展开 flag::0 代表收缩 -->
function setExpandRow(id,tableId){
   //
   var ids=document.getElementById(tableId).getElementsByTagName("tr");
   var open=document.getElementById(id+'_IPGroup').flag;
   if(open == '0'){
    document.getElementById(id+'_IPGroup').style.display = "";
    document.getElementById(id+'_gif').innerHTML="<img src='../../Resources/Images/minus.gif'>";
    document.getElementById(id+'_IPGroup').flag= '1';
   }
   if(open == '1'){
    document.getElementById(id+'_IPGroup').style.display = "none";
    document.getElementById(id+'_gif').innerHTML="<img src='../../Resources/Images/plus.gif'>";
    document.getElementById(id+'_IPGroup').flag= '0';
   }
}

/**  全部隐藏 **/
function HiddenAll(){

}

/*   全部显示 **/
function displayAll(){
 
}

/**      通过javaScript动态生成多个html控件   
   @desc: 增加多个指定 IP / IP范围 / 网络:
**/
var i=0;
var flag=0;
function addNetWorkIPDef(id,count){
 i++;
 if(flag == 0){
  if(count != null && count != ''){
   i=count;
   flag=1;
  }
 }
 var tr=document.getElementById(id).insertRow();
 var td1=tr.insertCell();
 var td2=tr.insertCell();
 var td3=tr.insertCell();
 var td4=tr.insertCell();
 td1.align = "left"; //设置位置
    td1.width = "3%" ;   //设置宽度
 td2.align = "left"; //设置位置
    td2.width = "10%" ;   //设置宽度
 td3.align = "left"; //设置位置
    td3.width = "10%" ;   //设置宽度
 td1.innerHTML="<img src='../../Resources/Images/delete.gif' οnclick=deleteNetWorkIPDef('"+id+"')  class='pointer' title='删除'>";
 td2.innerHTML="<select name='iDefineType_"+i+"' id='iDefineType_"+i+"' style='width: 80px'> <option value='1' selected >包括</option> <option value='0'>排除</option></select></td>";
 td3.innerHTML="<select name='IpType_"+i+"' id='IpType_"+i+"' onChange=changeValue(this.value,'Nmask_"+i+"','"+i+"') style='width:95px'> <option selected  value='0' >IP网段</option> <option  value='1'>IP地址</option> <option  value='2'>IP范围</option></select>";
 td4.innerHTML="<span id='Nmask_"+i+"' style='width: 100%'>&nbsp;子&nbsp;&nbsp;&nbsp;网&nbsp;<INPUT name='ulIPNetwork_"+i+"' id='ulIPNetwork_"+i+"' style='width: 120px' dataType='IP' msg='子网输入不正确!'>&nbsp; 子网掩码 &nbsp;<INPUT type='text' name='ulNetmask_"+i+"' id='ulNetmask_"+i+"' style='width: 120px' value='255.255.255.0' dataType='IP' msg='子网掩码输入不正确!'> <input type='hidden' name='IPGroupCount' value='"+i+"'></span>";
                            
}
/**            删除对应的指定 IP / IP范围 / 网络     **/
function deleteNetWorkIPDef(id){
 document.getElementById(id).deleteRow(window.event.srcElement.parentElement.parentElement.rowIndex);
}

/**
*         @sina 通过javaScript动态生成多个html控件  
    @desc: 增加多个过滤基于端口/协议   "str"+"aa";
*/
var j=0;
var sign=0;
function addNetWorkPort(id,count){
 j++;
 if(sign == 0){
  if(count != null && count != ''){
   j=count;
   sign=1;
  }
 }
 var tr=document.getElementById(id).insertRow();
 var td1=tr.insertCell();
 var td2=tr.insertCell();
 var td3=tr.insertCell();
 var td4=tr.insertCell();
 var td5=tr.insertCell();
 var td6=tr.insertCell();
 td1.align = "left"; //设置位置
    td1.width = "2%" ;   //设置宽度
    td2.align = "left"; //设置位置
    td2.width = "8%" ;   //设置宽度
    td3.align = "left"; //设置位置
    td3.width = "20%" ;   //设置宽度
    td4.align = "center"; //设置位置
    td4.width = "8%" ;   //设置宽度
    td5.align = "left"; //设置位置
    td5.width = "10%" ;   //设置宽度
 td1.innerHTML="<img src='../../Resources/Images/delete.gif' title='删除' class='pointer' οnclick=deleteNetWorkPort('"+id+"')>"
 td2.innerHTML="端口:";
 td3.innerHTML="<INPUT id='Port_"+j+"' name='Port_"+j+"'  type='text' size='8' value='-1' οnkeyup='setEndPortValue(this)' dataType='Port' msg='请输入起始端口号(整数)和结束端口号(整数),端口大小不能超过65535'>&nbsp;至&nbsp;<INPUT id='iEndPort_"+j+"' name='iEndPort_"+j+"'  type='text' value='-1' size='8' dataType='Port' msg='请输入起始端口号(整数)和结束端口号(整数),端口大小不能超过65535'>"; 
 td4.innerHTML="协议:"
 td5.innerHTML="<select id='ProtocolID_"+j+"' name='ProtocolID_"+j+"' style='width: 150px'> </select>";
 td6.innerHTML="<input name='portCount' type='hidden' value='"+j+"'> ";           
 addProtocolValues('ProtocolID_'+j);           
}

//     删除的方法
function deleteNetWorkPort(id){
 document.getElementById(id).deleteRow(window.event.srcElement.parentElement.parentElement.rowIndex);
}