动态表格添加js(使用原始js)


var i=1;
function addRow(){
    var tab=document.getElementById("insertTable").childNodes[0]; 
    var trnew=document.createElement("tr"); 
  	var td=document.createElement("td"); 
 	var td2=document.createElement("td"); 
 	var td3=document.createElement("td"); 
	var td4=document.createElement("td"); 
 	var td5=document.createElement("td"); 
	var td6=document.createElement("td"); 
	var td7=document.createElement("td"); 
	var td8=document.createElement("td"); 
	
	
   td.innerHTML =  "<input   name='trainLessionName'  cssStyle='width: 100%'  />" ;  //课程名称
   td2.innerHTML = " <select name='postId' >"  
   <%   
      List<Post> list = (List)request.getAttribute("postList");
         for(int i =0;i<list.size();i++){
              Post post = list.get(i);
              Long id = post.getId();
               String name = post.getName();
              %>
             + " <option value='<%=id%>' ><%=name%> </option>" 
               <%   
         }
    %>
  +" </select> ";
  
   td3.innerHTML = " <select name='trainType' >"  
   <%   
      Map<String,String> map = (Map)request.getAttribute("lessionType");
        for(Map.Entry<String, String> entry: map.entrySet()) {
              %>
             + " <option value='<%=entry.getKey()%>' ><%=entry.getValue()%> </option>" 
               <%   
         }
    %>
  +" </select> ";
   
   td4.innerHTML =  "<input   name='yearNum'  cssStyle='width: 100%'  />" ;  //课程名称
   
   td5.innerHTML =  "<input   name='perNum'  cssStyle='width: 100%'  />" ;  //课程名称
   
   td6.innerHTML =  "<input   name='perTime'  cssStyle='width: 100%'  />" ;  //课程名称  
   
   td7.innerHTML =  "<input   name='trainMainer'  cssStyle='width: 100%'  />" ;  //课程名称  
   
   td8.innerHTML =  "<input   type='button' value='删除' onclick='deleteRow("+i+")'  cssStyle='width: 100%'  />"//删除
   
	 trnew.appendChild(td); 
	 trnew.appendChild(td2); 
	 trnew.appendChild(td3); 
	 trnew.appendChild(td4); 
	 trnew.appendChild(td5); 
	 trnew.appendChild(td6); 
	 trnew.appendChild(td7); 
	 trnew.appendChild(td8); 
	 tab.appendChild(trnew); 
	 
    i++;
}


function deleteRow(n){ 
	 var tab=document.getElementById("insertTable"); 
	 var tr = tab.childNodes[0]; 
	 var rowslen=tab.rows.length;//取得目前还剩的行数
	 var a=getRealRows(n);
	 tab.deleteRow(a);
 }
 
 
 function getRealRows(n){//得到你要删除的行当前到底是第几行
	 var tab=document.getElementById("insertTable"); 
	 var rowslen=tab.rows.length-1;//取得目前表格还剩的行数
	 for(var j=0;j<rowslen;j++){
		  if(tab.rows(j).cells(7).innerHTML.indexOf("deleteRow("+n+")")>-1) return j;
		  //这里的5是第5列,具体怎么判断根据你自己情况再定,可以调整为其它的
		 }
		 if(n==0) return 0;
		 return -1;
   }

你可能感兴趣的:(动态表)