<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>
<body>
<table cellspacing="1" cellpadding="1" border="0" width="100%" id="detailItem">
<tbody id="detailItemBody">
<tr>
<td nowrap="" width="8%" class="td1">Item</td>
<td nowrap="" width="8%" class="td1">Item No</td>
<td nowrap="" width="10%" class="td1">Nickname</td>
<td nowrap="" width="10%" class="td1">Cleats / Flat</td>
<td nowrap="" width="18%" class="td1">Upper / Out</td>
<td nowrap="" width="8%" class="td1">Size</td>
<td nowrap="" width="8%" class="td1">Qty</td>
<td nowrap="" width="10%" class="td1">Net Price</td>
<td nowrap="" width="10%" class="td1">Actual Price</td>
<td nowrap="" width="10%" class="td1">Amount Price</td>
<td width="10%" class="td1">Action</td>
</tr>
<tr id="tr1">
<td width="8%" id="td1">
<input type="hidden" name="SampleOrderContentID"/>
<select name="Category" id="Category1">
<option value=""/>
<option value="GOLF">GOLF</option>
<option value="RUNNING">RUNNING</option>
<option value="RACING">RACING</option>
<option value="BASEBALL">BASEBALL</option>
<option value="INDOOR">INDOOR</option>
<option value="VOLLEYBALL">VOLLEYBALL</option>
<option value="TABLE TENNIS">TABLE TENNIS</option>
<option value="SOCCER">SOCCER</option>
<option value="FUTSAL">FUTSAL</option>
<option value="RUGBY">RUGBY</option>
<option value="BASKETBALL">BASKETBALL</option>
<option value="BADMINTON">BADMINTON</option>
<option value="T&F">T&F</option>
<option value="TENNIS">TENNIS</option>
<option value="HANDBALL">HANDBALL</option>
<option value="WALKING">WALKING</option>
<option value="EXPERT">EXPERT</option>
<option value="TRAINIG">TRAINIG</option>
<option value="OTHER">OTHER</option>
<option value="SCHOOL">SCHOOL</option>
<option value="SPORTS CASUAL">SPORTS CASUAL</option>
<option value="MATERIAL">MATERIAL</option>
</select> </td>
<td nowrap="" width="8%"><input type="text" size="8" name="ItemNo" id="ItemNo1"/></td>
<td nowrap="" width="10%"><input type="text" size="10" name="Nickname" id="Nickname1"/></td>
<td nowrap="" width="10%"><input type="text" size="8" name="Cleats" id="cleats1"/></td>
<td nowrap="" width="18%">
<select name="Upper" id="Upper1">
<option value=""/>
<option value="UTL">UTL</option>
<option value="UTH">UTH</option>
<option value="UPL">UPL</option>
<option value="UPH">UPH</option>
<option value="URL">URL</option>
<option value="URH">URH</option>
<option value="ULL">ULL</option>
<option value="ULH">ULH</option>
<option value="TEXTILE">TEXTILE</option>
<option value="PLASTIC">PLASTIC</option>
<option value="RUBBER">RUBBER</option>
<option value="LEATHER">LEATHER</option>
<option value="Syn.Leather">Syn.Leather</option>
</select>
/
<select name="Sole" id="Sole1">
<option value=""/>
<option value="SPF">SPF</option>
<option value="SPC">SPC</option>
<option value="SRF">SRF</option>
<option value="SRC">SRC</option>
<option value="SLF">SLF</option>
<option value="SLC">SLC</option>
<option value="RUBBER">RUBBER</option>
<option value="P.U.">P.U.</option>
<option value="NYLON">NYLON</option>
<option value="LEATHER">LEATHER</option>
<option value="EVA">EVA</option>
</select> </td>
<td nowrap="" width="8%"><input type="text" onkeyup="value=value.replace(/[^\d\.]/g,'')" size="4" name="Size" id="Size1"/></td>
<td nowrap="" width="8%"><input type="text" onkeyup="value=value.replace(/[^\d\.]/g,'')" onblur="CalculateTotal()" size="4" name="Qty" id="Qty1"/></td>
<td nowrap="" width="10%"><input type="text" onkeyup="value=value.replace(/[^\d\.]/g,'')" size="4" name="NetPrice" id="NetPrice1"/></td>
<td nowrap="" width="10%"><input type="text" onkeyup="value=value.replace(/[^\d\.]/g,'')" onblur="CalculateTotal()" size="4" name="ActualPrice" id="ActualPrice1"/></td>
<td nowrap="" width="10%"><input type="text" size="4" name="AmountPrice" id="AmountPrice1"/></td>
<td nowrap="" width="10%">
<!--input name="btnAdd" type="button" id="btnAdd" value="Add" onClick="Add('order-add-line.jsp')"-->
<input type="button" onclick="addOrderRow('detailItemBody',2,11,this,'add')" value="Add" id="btnAdd1" name="btnAdd"/>
<input type="button" onclick="addOrderRow('detailItemBody',2,11,this,'copy')" value="Copy" id="btnCopy" name="btnCopy"/>
<input type="button" onclick="addOrderRow('detailItemBody',2,11,this,'delete')" value="Delete" id="btnDelete" name="btnDelete" style="visibility:hidden "/></td>
</tr>
</tbody>
</table>
<table cellspacing="1" cellpadding="1" width="100%" border="0">
<tbody>
<tr>
<td width="8%"/>
<td width="8%"/>
<td width="10%"/>
<td width="10%"/>
<td width="18%"/>
<td width="8%" class="td1">Total</td>
<td width="8%"><input type="text" size="4" name="TotalQty"/></td>
<td width="10%"/>
<td width="10%"/>
<td width="10%"><input type="text" size="4" name="TotalAmountPrice"/></td>
<td width="10%"/>
</tr>
<tr>
<td class="td1" colspan="11">
Remark </td>
</tr>
<tr>
<td colspan="11">
<textarea id="Remark" rows="4" cols="100" name="Remark"></textarea>
</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
function addOrderRow(tab,rowNum,colNum,obj,addType)
{
var detailbody=document.getElementById(tab);
var row = document.createElement("tr");
var newrow=obj.parentNode.parentNode.innerHTML;
if(addType=='add'){
var row = detailbody.insertRow();
for(var i=0;i<obj.parentNode.parentNode.childNodes.length;i++){
var cell=row.insertCell();
cell.innerHTML=obj.parentNode.parentNode.childNodes[i].innerHTML;
//如果表单中有值就清空
for(var k=0;k<cell.childNodes.length;k++){
if (cell.childNodes[k].type == 'text') { cell.childNodes[k].value = ''; }
if (cell.childNodes[k].type == 'textarea') { cell.childNodes[k].value = ''; }
if (cell.childNodes[k].type == 'checkbox') { cell.childNodes[k].checked = false; }
if (cell.childNodes[k].type == 'radio') { cell.childNodes[k].checked = false; }
if (cell.childNodes[k].type == 'select-multiple') { cell.childNodes[k].selectedIndex = -1; }
if (cell.childNodes[k].type == 'select-one') { cell.childNodes[k].selectedIndex = -1; }
}
//cell.innerHTML=arr[i];
}
}else if(addType=='copy'){
//copy
//detailbody.insertRow().insertCell().innerHTML = newrow; ok
var row = detailbody.insertRow();
for(var i=0;i<obj.parentNode.parentNode.childNodes.length;i++){
var cell=row.insertCell();
cell.innerHTML=obj.parentNode.parentNode.childNodes[i].innerHTML;
}
}else{
//delete
if(confirm("Are you sure to delete this record?")){
obj.parentNode.parentNode.parentNode.removeChild(obj.parentNode.parentNode);
}else{
return false;
}
}
//只显示最后一个add按钮
var leg = detailbody.childNodes.length;
if(leg>1){
for(var j=0;j<leg-2;j++){
document.getElementsByName("btnAdd")[j].style.visibility="hidden";
}
document.getElementsByName("btnAdd")[leg-2].style.visibility="visible";
//document.getElementsByName("btnDelete")[0].style.visibility="hidden";
}
//显示除第一个外所有delete按钮
if(leg>1){
for(var j=1;j<leg-1;j++){
document.getElementsByName("btnDelete")[j].style.visibility="visible";
}
}
}
</script>
</body>
</html>
分享到：
相关推荐
在JavaScript编程中，动态添加表格数据行是一种常见的需求，特别是在构建交互式的Web应用程序时。这个功能允许用户在不刷新整个页面的情况下添加新的记录，提高了用户体验。在这个例子中，我们将探讨如何利用...
本示例主要涉及了六个关键功能：表格的刷新、复选框的全选与全不选、行的添加、拷贝、上下移动以及删除。以下是对这些功能的详细解释： 1. **表格刷新**： 刷新表格通常是为了更新表格中的数据，这可能是因为后台...
- 最后，更新`num`值并保存新复制行的引用。 删除行的实现： - 当点击`#workDayDel`按钮时，我们首先创建一个空数组`delIndexs`用于存储需要删除的行的索引。 - 使用`$(".trWorkDay:gt(0)")`选择所有除了第一行之外...
Vue.js是一个构建用户界面的渐进式JavaScript框架，核心库仅关注视图层，易于上手，同时也易于与其它库或已有项目整合。Vue.js的主要特点包括数据驱动和组件化，通过数据绑定、指令、组件等概念，可以高效地构建用户...
本文将深入探讨如何使用纯JavaScript实现表格的排序、插入、删除、移动行或列以及导出功能，同时还会提到如何增加表头。 首先，让我们讨论表格排序。在JavaScript中，我们可以获取表格元素，然后对数据进行比较以...
6. **代码生成**：完成设计后，菜单生成器会自动生成相应的HTML、CSS和（有时）JavaScript代码，可以直接复制粘贴到网站的源码中。代码通常会保持整洁，易于理解和维护。 7. **集成其他服务**：一些菜单生成器可能...
在IT行业中，JavaScript（简称JS）是一种广泛使用的脚本语言，尤其在网页开发中起着至关重要的作用。"点击复制微信+微信号随机调用"这个主题涉及到的是利用JavaScript实现的功能，让用户能够通过点击按钮轻松复制...
将生成的代码复制到前端IDE中，分为两个文件：js文件和index文件。js文件存放于js目录下，而index文件存放于views目录下。 步骤六：重新启动前后端并登录管理员账号 重新启动前后端，登录管理员账号，进入系统管理...
2. **编写JavaScript函数**：定义用于添加和删除行的函数，如`addRow()`和`deleteRow()`。这些函数通过操作DOM（文档对象模型）来动态修改表格。 3. **绑定事件监听器**：为“添加”和“删除”按钮绑定相应的事件...
3. **复制行**：复制功能可能涉及克隆选定的行对象，然后将副本插入到表格中。JavaScript的`cloneNode()`方法可以用于创建DOM元素的副本，之后只需调整新行的唯一标识，以便在数据库中正确存储和区分。 4. **事件...
可以选择不同形式的JS代码进行添加，分为文字和图片两种，图片又分为纵横和图文混排两种，完全生成静态的JS文件，同时可以对JS进行文件的添加 7、JS代码获取：JS代码的插入代码显示，只需进行复制粘贴的工作就可...
本资源“jquery动态复制或者删除input表单特效代码下载.zip”提供了利用jQuery实现的一种实用功能，即动态地在网页上复制或删除input表单元素，这对于创建动态、交互性强的用户界面非常有用。 首先，jQuery的选择器...
有时候我们需要根据自己的要求，导出项目文件，VS.NET自带的复制项目功能，对一些图片或js 文件等等其他一些文件，不能自动导出，除非把这些都添加到项目里。所以，有了这个功能，对项目发布非常的方便，并且支持...
可选的JSP列表，添加/复制，查看，编辑，删除和搜索每个表/查询的页面。所有脚本都通过URL正确链接。可自定义的字段显示顺序。 每个字段的高度可自定义的视图和编辑格式 编辑页面的客户端JavaScript验证 每个表/查询...
标题“代码生成器 增删改 方法”指的是该工具专注于为数据库表自动生成用于增（添加新记录）、删（删除记录）和改（修改记录）操作的代码。这种功能在数据驱动的应用程序开发中非常常见，特别是在关系型数据库管理...
有时候我们需要根据自己的要求，导出项目文件，VS.NET自带的复制项目功能，对一些图片或js 文件等等其他一些文件，不能自动导出，除非把这些都添加到项目里。所以，有了这个功能，对项目发布非常的方便，并且支持...
在这个“vue-draggable生成调查问卷”的项目中，我们将探讨如何利用Vue.Draggable来创建一个可自定义的、包含多种输入类型的调查问卷。 首先，让我们了解Vue.Draggable的基本用法。在Vue组件中，你可以通过安装和...
PersonaAvatarGenerator是由Draftbit开发的一款个人头像生成器，它主要使用JavaScript和CSS技术来创建动态、可定制的用户头像。这个项目可以帮助用户轻松设计出具有独特风格和个性的头像，适用于个人网站、社交媒体...
generator-gae-node-nestjs 用于在应用引擎节点上构建nestjs应用的生成器安装首先，使用安装和@mondomob/generator-gae-node-nestjs （假设您已经预安装了 ）。 npm install -g yonpm install -g @mondomob/...
10.12 用JavaScript生成面包屑导航 10.13 复选框的反选 10.14 选中所有复选框 10.15 复选框全选（二） 10.16 改变slsect选中项的颜色特效 第11章 颜色处理和菜单特效 11.1 背景颜色测试 11.2 RGB颜色在线转换 11.3 ...