<!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>
分享到：
相关推荐
在`jstable添加行删除行复制行.html`这个示例文件中，可以看到这些概念是如何具体实现的。通过阅读和理解代码，你可以更深入地学习如何利用JavaScript实现表格的动态管理。同时，也可以结合CSS和jQuery等库来增强...
### 为Xcode 9.1添加行操作快捷键：复制行、删除行及上下移动行 #### 背景介绍 在进行软件开发的过程中，高效便捷的操作方式能够极大提升开发效率。对于从Java开发转向iOS开发的程序员来说，可能会发现Xcode与他们...
本教程将深入探讨如何使用jQuery实现表格（table）的动态添加行和编辑功能，这对于构建数据驱动的Web应用至关重要。 首先，我们需要一个基本的HTML结构来展示表格。一个简单的表格通常包括thead部分（表头）和tbody...
在JavaScript编程中，动态添加表格数据行是一种常见的需求，特别是在构建交互式的Web应用程序时。这个功能允许用户在不刷新整个页面的情况下添加新的记录，提高了用户体验。在这个例子中，我们将探讨如何利用...
在JavaScript（JS）中，处理动态表格，特别是添加、复制和删除行的操作是网页交互设计中的常见需求。这种功能在数据展示、用户输入处理或管理类应用中尤为常见。下面我们将详细探讨这些知识点。 首先，让我们理解...
根据给定的文件信息，我们可以总结出一系列关于使用JavaScript（简称JS）操作HTML中的`<table>`元素，尤其是对表格的行（`<tr>`）和列（`<td>`或`<th>`）进行增删操作的关键知识点。以下是对这些功能的详细解释： #...
在JavaScript的世界里，HTML表格（Table）是一种常用的数据展示方式，而JS操作表格则成为网页动态交互的关键。本文将深入探讨如何使用JavaScript进行表格的创建、修改、删除以及实现一些特殊效果。 首先，我们从...
本文将详细介绍如何使用layui框架中的layui-table组件来实现复选框勾选的所有行数据的获取。 ### Layui-table组件介绍 Layui是一个前端UI框架，它提供了一系列可复用的组件。其中layui-table组件专门为表格数据的...
本文将深入探讨如何使用JavaScript实现表格的刷新、添加、复制和删除功能。 一、表格刷新 表格的刷新通常涉及到重新加载表格数据。在JavaScript中，你可以通过以下步骤实现： 1. 获取表格元素：首先，你需要获取到...
或者使用`.clone()`复制行，实现添加类似行的功能。 总结来说，jQuery使得在HTML表格上进行动态操作变得简单易行，通过`.append()`、`.remove()`等方法，开发者可以快速构建出交互性丰富的数据展示和管理界面。在...
1. **表格行、列删除** - `doTableRowDelete` 函数用于删除表格的行。它会根据传递的参数，如事件对象或指定的行号来确定要删除的行。如果未指定行号，函数会根据事件触发的TD元素向上查找TR元素进行删除。`tdCount...
首先，我们来看提供的代码片段，它定义了一个名为`customerInfoMethod`的对象，该对象包含了三个方法：`copyrow`、`copyrowUpdate`和`deleteRow`，分别用于复制行、更新复制行和删除行。 1. **复制行（`copyrow`和`...
1. **jQuery**：在这个项目中，jQuery被用来操作DOM（文档对象模型）元素，如选取表格元素、添加和删除表格行、获取和设置单元格数据等。例如，`$('table tbody')`可以选取表格的主体部分，`.append()`可以向表格中...
在网页开发中，经常需要对表格（table）进行动态操作，比如添加或删除行，以满足用户交互的需求。本文将详细介绍如何使用jQuery实现为table动态添加行的功能。 首先，我们需要理解jQuery的基本用法。jQuery是一个...
在JavaScript中，我们可以利用DOM（Document Object Model）接口来操作这些元素，包括获取、修改和删除等。 1. **事件监听**： 实现拖动功能的关键在于对鼠标事件的监听。我们需要绑定`mousedown`（鼠标按下）、`...
1. **增删改查**：vxe-table提供了基本的数据操作功能，允许用户对表格内的数据进行添加、删除、修改和查询。这使得在前端直接处理数据变得更加方便，减少了与后端的交互次数，提高了用户体验。 2. **虚拟滚动**：...
本文将深入探讨如何使用纯JavaScript实现表格的排序、插入、删除、移动行或列以及导出功能，同时还会提到如何增加表头。 首先，让我们讨论表格排序。在JavaScript中，我们可以获取表格元素，然后对数据进行比较以...
6. **前端代码实现注意事项**：文档强调，在使用JavaScript复制列内容到新行时，要确保复制源列（即被隐藏的行）不会被用户删除或修改，这会导致“Object expected”的JavaScript错误。因此，选择将模板行隐藏在用户...
这些操作通常通过Vue.js的方法来实现，比如在点击按钮时调用方法添加或删除数组元素，以及更新页面上相应DOM元素的显示。 以上知识点详细说明了在Vue.js框架中如何结合Element UI组件库来实现动态表单的生成，并为...
标题：“JavaScript 动态添加表格行 使用模板、标记”描述了在客户端使用JavaScript技术动态地向网页表格中添加新的行的操作方法。在Web开发中，经常需要在不重新加载页面的情况下动态更新表格内容，JavaScript提供...