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;
}
分享到:
相关推荐
JavaScript(js)作为客户端脚本语言,使得我们能够实现表格的动态交互功能,如动态添加行、行编辑以及行数据修改。下面我们将深入探讨这些知识点。 ### 1. 动态添加行 在HTML中,`<table>`元素用于创建表格,但...
在IT行业中,动态表格布局是一种常见的用户界面设计技术,它允许用户通过拖曳操作来自由地添加、删除和调整表格中的行、列以及单元格,从而实现高度自定义的界面布局。这种技术常用于数据管理和分析应用,因为它能...
可以使用JavaScript的DOM操作,如`innerHTML`或`appendChild`,来清除并重新填充表格内容。 2. **复选框全选/全不选**: 这一功能允许用户一键选中或取消选中所有行。实现方法是在表头添加一个主复选框,监听其`...
在实际开发中,我们通常需要使用 JS 来动态加载数据实现复杂表头多表头实例。例如: ```javascript layui.use('table', function(){ var table = layui.table; var options = { id: 'id', method: 'GET', elem:...
【JavaScript源代码】js实现单击可修改表格的示例主要展示了如何利用JavaScript来动态地交互和更新HTML表格中的数据。以下是对这个示例的详细解释: 首先,HTML部分设置了基本的页面结构,包括表格的样式和布局。...
根据给定的文件信息,我们可以总结出一系列关于使用JavaScript(简称JS)操作HTML中的`<table>`元素,尤其是对表格的行(`<tr>`)和列(`<td>`或`<th>`)进行增删操作的关键知识点。以下是对这些功能的详细解释: #...
使用JavaScript来监听滚动事件并动态调整表头位置。如果浏览器不支持`position: sticky`或者为了兼容性考虑,可以完全用JS实现。 ```javascript const table = document.getElementById('fixedTable'); const ...
为了解决这个问题,我们可以利用JavaScript(js)来实现表格部分固定的特性,保持横向标题行和纵向标题列在页面滚动时始终可见。以下是一些关键知识点和实现步骤: 1. **固定表头(Fixed Header)** - 使用CSS定位...
"一个基于纯JavaScript实现表格列拖动、排序的功能的js类库源码及例子" 提供了一个解决方案,让开发者能够轻松地为他们的网页应用添加动态且用户友好的功能。这个类库专门针对表格数据展示,允许用户通过拖动列头来...
本话题主要聚焦于如何利用JavaScript(JS)来实现三维数据表格的绘制和应用。 首先,让我们理解什么是三维数据表格。在二维表格中,我们通常有行和列来组织数据,而三维表格则引入了第三个维度,可以是时间、类别或...
通过 JavaScript,我们可以轻松地实现表格数据的添加、删除与修改等功能,这些功能对于提高用户交互体验非常重要。 #### 一、添加行(Add Row) 添加行通常是指在表格中增加新的数据行。例如,在上面提供的代码...
从标题和描述来看,我们将讨论如何使用Docxtemplater来处理动态的、不确定列数的表格,并设置表头加粗以及表格居中对齐。 首先,`Docxtemplater`允许我们创建一个`.docx`模板文件,其中包含静态内容,然后用...
在JavaScript编程中,实现多级排序以及动态改变表格宽度和高度是常见的需求,尤其是在构建交互性强的数据展示界面时。下面将详细讲解如何实现这些功能。 首先,多级排序是指用户可以按照不止一列对表格数据进行排序...
在本文中,我们将深入探讨如何使用jQuery来实现纯JavaScript的表格转置功能。表格转置是一种常见的数据展示需求,它将原始表格的行变为列,列变为行,从而以不同的视角展示数据。以下是对给定标题和描述的详细解读及...
在JavaScript Web前端开发中,对表格数据进行排序是一项常见的需求,尤其在动态展示大量信息时。本示例基于《JavaScript高级程序设计》一书中的相关内容,将表格列的排序功能进行了封装,便于复用和维护。以下是实现...
根据给定的信息,本文将详细解释如何通过JavaScript(简称JS)将JSON数据转换为表格,包括HTML字符串形式和DOM对象形式。此方法适用于快速展示JSON数据,并可方便地集成到Web应用中。 ### 标题解析:JS自动把JSON...
在jQuery中,我们可以通过监听窗口滚动事件(`$(window).scroll()`)来动态添加滚动条。当表格内容超过可视区域时,我们可以将表头复制到一个新的固定定位的div中,使其始终保持在视口顶部。这就是"superTables.js...
在本文中,我们将深入探讨如何使用原生JS的`sortTable`方法以及它的工作原理。 首先,`sortTable`通常涉及到以下几个关键步骤: 1. **选择表格元素**:你需要获取到HTML中的表格元素,这可以通过`document....
动态添加行的过程通常涉及表单输入验证和数据处理。在jQuery中,我们可以监听事件(如.click()或.submit())来触发这些操作。例如,当用户提交表单时,可以收集输入数据,创建新的tr元素,然后将其添加到表格的末尾...
通过理解基本的实现原理和利用JavaScript的动态更新能力,我们可以轻松地为自己的项目添加这一功能。如果想要深入研究,可以从给定的博文链接(https://yixinhu.iteye.com/blog/1668843)中获取更多细节和示例代码。