当前位置: 代码迷 >> Web前端 >> 动态设式样
  详细解决方案

动态设式样

热度:25   发布时间:2012-11-07 09:56:10.0
动态设样式
<!--    disabled="true"  -->

 <table width="100%" id="childTable" align="center" bordercolorlight="#95A4B2" bordercolordark="#FFFFFF" bordercolor="#D7D7D7" border="1" cellspacing="0"        >
  <tr>
    <td width="100px" class="grid_head">选择</td>	
    <td width="100px" class="grid_head">WBS号</td>
    <td width="100px" class="grid_head">设计编号</td>	
    <td width="230px" class="grid_head">单项名称</td>	
  </tr>

  <tr>
	 <td colspan="4"><div align="center">
	    <input type='button' name='childAdd' value='增加单项'	class="btn_form_a" onClick='addProcessManage()'/>
	    <input type='button' name='childDel' value='删除单项' class="btn_form_a" onclick='delProcessManage()'/>
	 </div></td>
	</tr>
</table>
<script>
var i=0;
//新增单项
function addProcessManage() {  
		var temp = i++;
    var objTable=document.getElementById('childTable');
    var objTableLength=objTable.rows.length;
    var myrow=objTable.insertRow(--objTableLength);
    
    //1
    var mycell=null;
    mycell=myrow.insertCell();
    mycell.setAttribute('align','center');
    mycell.setAttribute('width','100px');
    mycell.className = "list_td2_c"; 
    var addText="<input type='checkbox' name='checkboxChild_child' value='"+temp+"'/>"
    			+ "<input type='hidden' name='processManageId' value='"+temp+"'/>";;
    mycell.innerHTML=addText;
    
     //2 WBS号
    var mycell=null;
    mycell=myrow.insertCell();
    mycell.className = "list_td2_c"; 
    mycell.setAttribute('align','center');
    mycell.setAttribute('width','100px');
    var addText=temp;	
    mycell.innerHTML=addText;
    
     //3 设计编号
    var mycell=null;
    mycell=myrow.insertCell();
    mycell.setAttribute('align','center');
    mycell.setAttribute('width','100px');
    mycell.className = "list_td2_c"; 
    var addText = temp;
    mycell.innerHTML=addText;
    //4 单项名称
     var mycell=null;
    mycell=myrow.insertCell();
    mycell.setAttribute('align','center');
    mycell.setAttribute('width','230px');
    mycell.className = "list_td2_c"; 
    var addText = temp;
    mycell.innerHTML=addText;  
}

//删除单项
function delProcessManage(){

	var els=document.getElementsByName("checkboxChild_child");
	var len=els.length ;
	for(var i=0;i<len;i++){
		
		if(els[i].checked){
			
			var e = els[i];
			while(e.parentElement.nodeName != "TR"){
				e=e.parentElement;
			}
			var temp=e.parentElement;
			//alert(temp.nodeName);
			while(e.parentElement.nodeName != "TBODY"){
				e=e.parentElement;
			}
			e.parentElement.removeChild(temp);
			i--;
			len-=1;
		}
	}
}	
	 
</script>


/**

Javascript代码
mycell.setAttribute("style","width:100%;") 

mycell.setAttribute("style","width:100%;")
IE中则必须使用style.cssText
Javascript代码
mycell1.style.cssText = "width:100%;"; 


//firefox  
mycell.setAttribute("class", "cssName");  
 
//IE  
mycell.className = "cssName";  
 
/** 
*下面的方式在firefox和IE中都是不允许的,会报错。因为class是js保留关键字 
*className这个属性就是因为这个原因诞生的。 
**/ 
mycell.class = "cssName"; 
*/
  相关解决方案