`
dilantaya
  • 浏览: 102477 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

动态表格添加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;
   }

分享到:
评论

相关推荐

    table动态添加行并编辑

    JavaScript(js)作为客户端脚本语言,使得我们能够实现表格的动态交互功能,如动态添加行、行编辑以及行数据修改。下面我们将深入探讨这些知识点。 ### 1. 动态添加行 在HTML中,`&lt;table&gt;`元素用于创建表格,但...

    动态表格布局源码

    在IT行业中,动态表格布局是一种常见的用户界面设计技术,它允许用户通过拖曳操作来自由地添加、删除和调整表格中的行、列以及单元格,从而实现高度自定义的界面布局。这种技术常用于数据管理和分析应用,因为它能...

    js表格刷新、全选、全不选、添加、拷贝、上下移动、删除行功能实现

    可以使用JavaScript的DOM操作,如`innerHTML`或`appendChild`,来清除并重新填充表格内容。 2. **复选框全选/全不选**: 这一功能允许用户一键选中或取消选中所有行。实现方法是在表头添加一个主复选框,监听其`...

    layui js 动态加载数据 复杂表头多表头实例.pdf

    在实际开发中,我们通常需要使用 JS 来动态加载数据实现复杂表头多表头实例。例如: ```javascript layui.use('table', function(){ var table = layui.table; var options = { id: 'id', method: 'GET', elem:...

    【JavaScript源代码】js实现单击可修改表格.docx

    【JavaScript源代码】js实现单击可修改表格的示例主要展示了如何利用JavaScript来动态地交互和更新HTML表格中的数据。以下是对这个示例的详细解释: 首先,HTML部分设置了基本的页面结构,包括表格的样式和布局。...

    js操作table元素,表格的行列新增、删除汇集.txt

    根据给定的文件信息,我们可以总结出一系列关于使用JavaScript(简称JS)操作HTML中的`&lt;table&gt;`元素,尤其是对表格的行(`&lt;tr&gt;`)和列(`&lt;td&gt;`或`&lt;th&gt;`)进行增删操作的关键知识点。以下是对这些功能的详细解释: #...

    Js实现表格头部第一行下拉固定

    使用JavaScript来监听滚动事件并动态调整表头位置。如果浏览器不支持`position: sticky`或者为了兼容性考虑,可以完全用JS实现。 ```javascript const table = document.getElementById('fixedTable'); const ...

    js实现表格部分固定

    为了解决这个问题,我们可以利用JavaScript(js)来实现表格部分固定的特性,保持横向标题行和纵向标题列在页面滚动时始终可见。以下是一些关键知识点和实现步骤: 1. **固定表头(Fixed Header)** - 使用CSS定位...

    一个基于纯JavaScript实现表格列拖动、排序的功能的js类库源码及例子

    "一个基于纯JavaScript实现表格列拖动、排序的功能的js类库源码及例子" 提供了一个解决方案,让开发者能够轻松地为他们的网页应用添加动态且用户友好的功能。这个类库专门针对表格数据展示,允许用户通过拖动列头来...

    三维数据表格与JS代码

    本话题主要聚焦于如何利用JavaScript(JS)来实现三维数据表格的绘制和应用。 首先,让我们理解什么是三维数据表格。在二维表格中,我们通常有行和列来组织数据,而三维表格则引入了第三个维度,可以是时间、类别或...

    Docxtemplater模板导出word,动态不确定列数的表格,表头加粗,且表格居中

    从标题和描述来看,我们将讨论如何使用Docxtemplater来处理动态的、不确定列数的表格,并设置表头加粗以及表格居中对齐。 首先,`Docxtemplater`允许我们创建一个`.docx`模板文件,其中包含静态内容,然后用...

    js表格table的增删改

    通过 JavaScript,我们可以轻松地实现表格数据的添加、删除与修改等功能,这些功能对于提高用户交互体验非常重要。 #### 一、添加行(Add Row) 添加行通常是指在表格中增加新的数据行。例如,在上面提供的代码...

    js实现多级排序以及动态改变表格宽度和高度

    在JavaScript编程中,实现多级排序以及动态改变表格宽度和高度是常见的需求,尤其是在构建交互性强的数据展示界面时。下面将详细讲解如何实现这些功能。 首先,多级排序是指用户可以按照不止一列对表格数据进行排序...

    jquery实现纯js转置表格

    在本文中,我们将深入探讨如何使用jQuery来实现纯JavaScript的表格转置功能。表格转置是一种常见的数据展示需求,它将原始表格的行变为列,列变为行,从而以不同的视角展示数据。以下是对给定标题和描述的详细解读及...

    js实现表格中列的排序

    在JavaScript Web前端开发中,对表格数据进行排序是一项常见的需求,尤其在动态展示大量信息时。本示例基于《JavaScript高级程序设计》一书中的相关内容,将表格列的排序功能进行了封装,便于复用和维护。以下是实现...

    JS自动把JSON数据转换成表格

    根据给定的信息,本文将详细解释如何通过JavaScript(简称JS)将JSON数据转换为表格,包括HTML字符串形式和DOM对象形式。此方法适用于快速展示JSON数据,并可方便地集成到Web应用中。 ### 标题解析:JS自动把JSON...

    Jquery表格添加滚动条插件,固定表头

    在jQuery中,我们可以通过监听窗口滚动事件(`$(window).scroll()`)来动态添加滚动条。当表格内容超过可视区域时,我们可以将表头复制到一个新的固定定位的div中,使其始终保持在视口顶部。这就是"superTables.js...

    原生js sortTable对表格进行排列顺序表格递增顺序排列

    在本文中,我们将深入探讨如何使用原生JS的`sortTable`方法以及它的工作原理。 首先,`sortTable`通常涉及到以下几个关键步骤: 1. **选择表格元素**:你需要获取到HTML中的表格元素,这可以通过`document....

    jquery表格动态增删改及取数据绑定数据完整方案

    动态添加行的过程通常涉及表单输入验证和数据处理。在jQuery中,我们可以监听事件(如.click()或.submit())来触发这些操作。例如,当用户提交表单时,可以收集输入数据,创建新的tr元素,然后将其添加到表格的末尾...

    table横向纵向表头冻结js代码

    通过理解基本的实现原理和利用JavaScript的动态更新能力,我们可以轻松地为自己的项目添加这一功能。如果想要深入研究,可以从给定的博文链接(https://yixinhu.iteye.com/blog/1668843)中获取更多细节和示例代码。

Global site tag (gtag.js) - Google Analytics