`

在原有的表格中,添加行与列

 
阅读更多

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%

String path = request.getContextPath();

%>

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<html>

<head>

<script src="<%=path%>/resources/admin/js/jquery-1.8.3.min.js"></script>

<script type="text/javascript">

function show(obj,valu){

obj.innerHTML = "<input type='text' name='name' value='"+ valu +"'>";

}

 

</script>

</head>

<body>

<input type="button" value="添加等级" id="zjdj">

<input type="button" value="添加结构" id="zjjg">

<form action="<%=path%>/admin/courseGrade/save" method="post">

<table border="1px" width="800px" id="course">

<tr id="ss">

<td id="mm">

等级\结构

</td>

<c:forEach items="${courseStructureList}" var="courseStructure">

<td onDblClick="show(this,'${courseStructure.name}')" id="jg">

<input type="hidden" name="id" value="courseStructure.id">

<input type="hidden" name="name" value="${courseStructure.name}">

${courseStructure.name}

</td>

</c:forEach>

</tr>

 

 

<c:forEach items="${courseKnowledgeBlockList}"

var="courseKnowledgeBlock" varStatus="s1">

<tr>

 

<c:forEach items="${courseGradeList}" var="courseGrade"

varStatus="status">

 

<c:if test="${s1.index==status.index}">

 

<td onDblClick="show(this,'${courseGrade.name}')" id="dj">

<input type="hidden" name="id" value="courseGrade.id">

<input type="hidden" name="name" value="${courseGrade.name}">

${courseGrade.name}

</td>

 

</c:if>

</c:forEach>

<c:forEach items="${courseKnowledgeBlock}" var="zhishikuai">

<td onDblClick="show(this,'${zhishikuai.name}')" id="zhishikuai">

<input type="hidden" name="id" value="zhishikuai.id">

<input type="hidden" name="name" value="${zhishikuai.name}">

${zhishikuai.name}

</td>

 

</c:forEach>

</tr>

</c:forEach>

</table>

</form>

</body>

<script type="text/javascript">

$("#zjdj").click(function(){

$("#course tr:last").after('<tr></tr>');

for(var a=0;a<$("tr:eq(0) td").length;a++) {

$("tr:last").append("<td ><input type='text' size='10'></td>")

}

});

$("#zjjg").click(function(){

$("#course tr").append("<td><input type='text' size='10'></td>")

});

</script>

</html>

 

分享到:
评论

相关推荐

    表格动态插入行

    在网页开发中,表格是一种常见的数据展示方式,而动态插入行是提高用户体验和交互性的重要技术。本知识点主要探讨如何使用JavaScript(简称JS)来实现表格动态插入行的功能。JavaScript是一种广泛使用的客户端脚本...

    js排序表格,实现按列排序

    在网页开发中,数据展示通常会使用到表格(Table)元素,而为了提供更好的用户体验,对表格数据进行排序是一项常用的功能。"js排序表格,实现按列排序"这个主题主要涉及JavaScript(js)如何用于实现对HTML表格的...

    js控制表格排序,插入,删除,移动行或列,导出表格

    移动行或列涉及更复杂的操作,因为需要在DOM中重新排列元素。这可能包括复制当前行或列,删除原有位置的元素,然后在新位置插入复制的元素。 增加表头是另一个常见需求,可以通过创建`&lt;thead&gt;`元素,包含`&lt;th&gt;`...

    Word,行,列,单元格,添加,删除.docx

    添加列的操作与添加行类似,只需在目标位置的左侧或右侧单元格内单击,然后在“布局”选项卡的“行和列”组中,选择“在左侧插入”或“在右侧插入”。 **删除单元格** 删除单元格时,先选中要删除的单元格(点击其...

    易语言高级表格复制粘贴

    表格对象是显示和操作这些数据的界面元素,它需要支持添加、删除、修改行和列等基本操作。 2. **选区操作**:复制功能首先需要用户选择表格中的特定区域。这通常通过鼠标或键盘操作来实现,易语言中会提供相应的...

    jquery 列表行冻结、列冻结

    使用这个插件,开发者只需要引入相关JS文件,然后调用插件方法,即可快速地为自己的表格添加行和列冻结功能。例如: ```javascript $(document).ready(function() { $("#myTable").tableFreeze({ freezeRows: 1, ...

    隔行(隔列)插入空白行(列)工具

    所谓“隔行(隔列)插入空白行(列)工具”,顾名思义,即是专为电子表格设计的一个软件或功能,它允许用户在原有的行或列之间自动地插入空白行或列。这对于那些需要对数据进行清晰划分的用户来说,无疑是一个非常...

    DataGirdView同一列下拉框每一行显示不同的内容

    在某些场景下,我们可能需要在某一列中使用下拉框(ComboBox)来提供用户选择,而每个下拉框的选项又需要根据所在行的数据进行个性化设置。这涉及到`DataGridView`与`DataTable`的结合使用以及自定义数据绑定。 `...

    EasyUI指定列-合并相同数据行

    在日常的数据处理过程中,经常会遇到需要对表格中的重复数据进行整理的情况。EasyUI作为一种轻量级的用户界面库,提供了丰富的功能来帮助开发者高效地处理这类问题。其中,“合并相同数据行”是一个非常实用的功能,...

    wps表格外部边框加粗内部边框不变化

    2. **通过快捷菜单设置**:也可以在选中表格后,直接右键点击表格内的任意位置,在弹出的快捷菜单中选择“边框和底纹”。 ##### 第三步:设置外部边框 - 在“边框和底纹”对话框中,可以看到多个预设选项,如“无框...

    单击表格头排序

    这通常涉及删除原有表格行,然后按照新顺序创建并插入新行。可以使用`appendChild`或`insertBefore`等方法来操作。 5. **排序状态管理**:为了支持反向排序(点击同一列再次排序时,数据按相反顺序排列),我们需要...

    选中表格后单击可对表格进行编辑

    在IT行业中,尤其是在数据分析、文档处理或网页设计等场景,表格是经常被使用的一种数据组织方式。"选中表格后单击可对表格进行编辑"这一功能是许多应用程序中的常见特性,它允许用户方便地对表格内容进行快速修改。...

    Excel行和列的基本操作-插入.docx

    在日常使用中,我们常常需要在特定位置添加新的行以适应数据的增加或表格结构的调整。以在第6行和第7行之间新增一行为例,以下是详细的步骤: 1. 确定插入位置:首先将光标定位到第7行。这可以通过鼠标滚动条来完成...

    JavaScript实现表格排序

    这种方法适用于复杂排序,如多列排序或需要保留原有表格样式的情况。 实现表格排序时,我们通常会监听表头的点击事件,因为用户通常期望通过点击表头来触发排序。在事件处理器中,我们可以获取到当前被点击的列,并...

    给Excel2021表格中的数据添加单位.docx

    在Excel2021中为数据批量添加单位是一项非常实用的技巧,特别是在处理涉及测量值或需要统一格式的表格时。以下将详细说明如何通过设置单元格格式来实现这一功能。 首先,确保你已经打开了Excel2021,并且你的工作表...

    怎么在PPT2021插入表格.docx

    - 复制的表格会出现在PPT中,保持原有的格式和布局。 - 如需更改样式,可再次应用PPT的表格样式。 5. **注意事项**: - 避免直接复制过大表格到PPT,因为大表格在幻灯片上可能难以阅读,而且PPT可能处理不好,...

    java导出pdf、加表格、加水印

    在Java开发中,导出PDF、添加表格以及加水印是常见的需求,这些功能可以用于创建报告、发票、证书等文档。PDF(Portable Document Format)是一种广泛应用的文档格式,能够跨平台保持一致的布局和样式。下面将详细...

    C#向EXCEL模板文件中插入数据行

    本话题聚焦于如何利用C#在已有的Excel模板文件中插入数据行,同时保持模板原有的格式不受破坏。这在数据分析、报表生成或批量处理数据时非常常见。 首先,我们需要了解的是Microsoft Office Interop库,这是.NET ...

    CSS3制作响应式表格

    通过定义在不同屏幕尺寸下的样式规则,我们可以让表格在小屏幕设备上折叠或堆叠,而在大屏幕上保持原有的列布局。例如: ```css @media (max-width: 768px) { /* 在屏幕宽度小于768px时应用的样式 */ } ``` 2....

    Boostrap table 列头和内容不对齐问题,终极解决方案

    然而,在实际应用中,我们可能会遇到一个常见的问题:表格的列头(thead)与内容(tbody)在对齐上出现问题,这会严重影响用户体验。本文将深入探讨这个问题的原因,并提供一个终极解决方案。 列头与内容不对齐的...

Global site tag (gtag.js) - Google Analytics