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

最新推荐文章于 2025-08-06 16:12:40 发布

dilantaya4

最新推荐文章于 2025-08-06 16:12:40 发布

阅读量143

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/dilantaya4/article/details/84113309

本文详细介绍了如何使用JavaScript实现一个课程管理系统的功能，包括添加和删除课程。通过创建HTML表单元素和使用JavaScript操作DOM，实现了课程名称、教师、类型、年份、人数、时间以及删除按钮的动态生成与交互。代码示例展示了如何通过遍历请求参数获取课程列表和类型，并将其填充到下拉菜单中。



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;
   }