1、第一个应用是对上传文件的新增或者删除
这个主要是采用的是struts2的框架。
<s:form action="upload" theme="simple" enctype="multipart/form-data">
<table align="center" border="1" width="50%">
<tbody id="one">
<tr>
<td> username</td><td> <s:textfield name="username" label="username"></s:textfield></td>
</tr>
<tr>
<td>password</td><td><s:password name="password" label="password"></s:password></td>
</tr>
<tr>
<td>file</td><td><s:file name="file" label="file"></s:file><input type="button" onclick="add();" value="新增上传文件"></td>
</tr>
</tbody>
</table>
这里已经有一个可以上传文件、这里通过js可以上传多个文件
<script type="text/javascript">
function add()
{
var tbodyEle = document.getElementById("one");
var trEle = document.createElement("tr");
var tdEle = document.createElement("td");
var textEle = document.createTextNode("file");
tdEle.appendChild(textEle);
trEle.appendChild(tdEle);
tdEle=document.createElement("td");
var inputEle=document.createElement("input");
inputEle.name="file";
inputEle.type="file";
tdEle.appendChild(inputEle);
var inputEle = document.createElement("input");
inputEle.value="删除";
inputEle.type="button"
inputEle.onclick=function()
{
tbodyEle.removeChild(trEle);
}
tdEle.appendChild(inputEle);
trEle.appendChild(tdEle);
tbodyEle.appendChild(trEle);
}
</script>
这里在后台的action中可以通过 private List<File> file;//这里是定义可以上传多个文件
2、第二个应用是订单和明细的应用
<body>
<table align="center" border="1" width="600">
<tr align="center">
<td>订单名称</td><td><input name="info.ordername" /></td>
</tr>
<tr align="center">
<td>订单数量</td><td><input name="num" onclick="addnum();"/></td>
</tr>
<tr align="center">
<td>总价格</td><td><input name="totalje" onclick="addtotal();"/></td>
</tr>
<tr align="center">
<td>订单日期</td><td> <input name="info.orderdate" /></td>
</tr>
</table>
<p align="center">订单明细(<input type="button" value="添加明细" onclick="addmx();">)</p>
<div id="container">
<div>
<table align="center" width="600" border="1" style="display:inline;">
<tr align="center">
<td>产品名称</td><td><input name="items[0].mxname" size=8></td>
<td >数量</td><td><input name="items[0].mxnum" size=8 id="num0" ></td>
<td>单价</td><td><input name="items[0].mxprice" size=8 id="price0"></td>
</tr>
</table><input type=button value="删除" onclick="this.parentNode.outerHTML='';i--;alert(i);"/>
</div>
</div>
</body>
js代码为：
<script type="text/javascript">
var i=1;
function addmx()
{
var container = document.getElementById("container");
var module="<div>"+
"<table width=600 border=1 align=center style=\"display:inline;\">"+
"<tr align=center>"+
"<td>产品名称</td><td><input name=\"items["+i+"].mxname\" size=8 ></td>"+
"<td>数量</td><td><input name=\"items["+i+"].mxnum\" size=8 id=num"+i+"></td>"+
"<td>单价</td><td><input name=\"items["+i+"].mxprice\" size=8 id=price"+i+"></td>"
+"</tr>"
+"</table><input type=button value=\"删除\" onclick=\"this.parentNode.outerHTML='';i--;alert(i);\">"
+"<div>";
container.insertAdjacentHTML("beforeEnd",module);
i++;
}
//订单数量
function addnum(){
var num = document.getElementById("num");
var t=0;
for(var p=0;p<i;p++){
var n = document.getElementById("num"+p).value;
if(n!=""){
t=t+parseInt(n);
}
}
num.value=t;
}
//总金额
function addtotal()
{
var totalje=0;
for(var j=0;j<i;j++)
{
var numValue=document.all("num"+j).value;
var priceValue=document.all("price"+j).value;
if(numValue!=""&&priceValue!="")
totalje=totalje+parseInt(numValue)*parseFloat(priceValue);;
}
document.all("totalje").value=totalje;
}
</script>
在后台action可以用list得到（这个是在struts2的应用）
分享到：
相关推荐
该文件是关于本地存储的逻辑处理(缓存到本地的数据最大缓存15条，并且新的插入在第一位，首先得到当前的存储数据情况，将关键字存到数组中，判断如果数组中有相同的数据，则把重复的数据删除，将新的关键字存入到...
6. **事件监听**：除了回车事件，还有其他一些重要的事件需要监听，例如点击删除按钮时的`click`事件，清空输入框时的`blur`事件，以及可能的数据验证和错误处理事件。这些事件可以用来执行相应的业务逻辑，如更新...
本文将深入探讨如何实现一个具备主表和子表双向交互功能的表格系统，其中包括新增、编辑、保存、删除、主表展开以及分页国际化等关键功能。 首先，我们要理解React中的表格组件。React本身并不提供内置的表格组件，...
① 学号、成绩文本输入框。 ② 查找按钮：根据学号文本框的内容进行查找，并把结果显示在右边的表格里。 ③ 查找按钮：根据成绩文本框的内容进行查找，并把结果显示在右边的表格里。 ④ 新增按钮：弹出一个可以输入...
2. **CSS样式**：定义文本框和删除按钮的样式，确保页面美观且易于操作。 3. **jQuery脚本**：在文档加载完成后，通过`$(document).ready()`函数绑定按钮的点击事件。当用户点击按钮时，执行生成文本框的函数。 4....
TextRange的传统用途是对用户在Web页上用鼠标圈选的文字内容的操作，比如变化、删除、新增等。但其经典的用途却是，在Web页面中查找文字和获取输入框光标的位置。其中后者又有可以衍生出很多更有用的用途，比如：...
Tag输入框是一种常见的用户界面元素，它允许用户在输入文本的同时，将其转化为标签形式展示，常用于关键词输入、分类选择等场景。在Layui中，我们可以借助其内置的元素操作和事件处理能力来实现这一功能。 **一、...
在IT行业中，jQuery库是广泛使用的JavaScript库，它极大地简化了DOM操作、事件处理和动画效果。本资源"jQuery动态添加删除编辑...在实际开发中，可以根据项目需求对这些基础功能进行扩展和定制，以满足特定的业务场景。
- 每行包括几个文本输入框，用于输入数据。 2. **JavaScript部分**： - 定义函数`tbladdrow()`，用于向表格中添加新行。 - 每行中的每个输入框都有唯一ID和名称。 - 示例代码片段： ```javascript function ...
本文将深入探讨如何使用jQuery实现动态列表的新增、编辑和删除功能，这些是网页应用中常见的交互元素。 一、动态列表的基础 动态列表通常是一个可交互的HTML元素集合，如`<ul>`或`<table>`，它们可以实时更新以...
在这个文件中，通常会包含HTML结构，其中会有用于显示和操作标签的元素，如文本输入框和一个显示已添加标签的区域。例如，可能会有一个`<input>`元素用于用户输入新的标签，以及一个`<ul>`或`<div>`来展示已有的标签...
在Vue和iView框架中，动态新增和删除是常见的数据管理功能，特别是在表格或表单中，用户可能需要根据需求动态添加或移除字段。在本案例中，我们将讨论如何利用Vue和iView来实现这一功能。 首先，我们需要了解Vue的...
描述中的 "随着你写入的文字增加输入框高度改变 textarea" 进一步明确了这个功能的实现：当用户在`textarea`中输入文字，输入框的高度会自动增加以适应新增的文本行。这样的设计通常需要通过JavaScript来实现，因为...
- 将第二个单元格（索引为1）的内容替换为可编辑的文本输入框。 - 更改删除按钮的文字并设置点击事件为更新操作。 4. **更新订单**：`upRow()` 函数负责完成编辑后的保存操作。 - 通过传入的行ID获取目标行。 -...
* 选择供应商和产品负责人时，弹出对应的弹出层，选择其中的一项，点击完成弹出层消失，对应的文本输入框中显示各自选择的文字 * 职业固定 5 项，每一项都需要在下方的材料中勾选各自的材料项 * 材料内容由系统...
在Vue.js框架中，结合Element UI库，我们可以轻松地实现表格的动态操作，如新增、编辑和删除。Element UI提供了一套美观且易用的组件，适用于开发Web应用的用户界面。以下是如何利用Vue和Element UI来实现这些功能的...
类似163邮箱的设计，可能还包含了一些用户体验优化的细节，比如输入建议（自动补全）、删除联系人的功能、以及选中和取消选中联系人的交互等。 7. **代码组织与封装**： 优秀的源码结构和封装可以使代码易于理解...
前面两个输入框，用于输入源路径和目标就，下面的图片、视频、音乐表示在目标路径中创建的文件夹，后面的文件后缀，表示将这类文件移动到对应的文件夹中，加减号可以新增或删除文件夹。 两个文件分别是对话框按钮...
在触发删除事件后，我们需要确保正确选择到要删除的元素，这通常涉及到对元素的父级或兄弟元素的查询。 自定义标题功能意味着用户可以根据需求调整页面的头部信息，这可能通过简单的文本输入或者下拉菜单实现。使用...
在本场景中，“DataGridView文本框删除编辑”指的是利用`DataGridViewTextBoxColumn`控件来实现数据的显示，同时支持用户通过文本框进行新增、删除和编辑操作。这种功能常用于创建自定义的数据库前端界面，便于用户...