`
anson_xu
  • 浏览: 505996 次
  • 性别: Icon_minigender_1
  • 来自: 惠州
社区版块
存档分类

js table 添加行 删除行 复制行

J#JSP.netHTMLF# 
阅读更多
<!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&amp;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>
分享到：
| flex,jsp,mysql三者之间的传值联系
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jstable添加行删除行复制行

    在`jstable添加行删除行复制行.html`这个示例文件中，可以看到这些概念是如何具体实现的。通过阅读和理解代码，你可以更深入地学习如何利用JavaScript实现表格的动态管理。同时，也可以结合CSS和jQuery等库来增强...

    为Xcode9.1添加行操作快捷键 复制行 删除行 上下移动行

    之前在做JAVA开发时,使用eclipse过程中,用的最多也是特喜欢的就是删除当前行和复制当前行的快捷键。然而在转向iOS开发时,Xcode是不支持这两个快捷键的,一次偶然发现有个小窍门可以为Xcode来添加这两个快捷键。

    jquery实现table自动添加行和编辑

    本教程将深入探讨如何使用jQuery实现表格（table）的动态添加行和编辑功能，这对于构建数据驱动的Web应用至关重要。 首先，我们需要一个基本的HTML结构来展示表格。一个简单的表格通常包括thead部分（表头）和tbody...

    JS 添加行,拷贝行,删除行

    在JavaScript（JS）中，处理动态表格，特别是添加、复制和删除行的操作是网页交互设计中的常见需求。这种功能在数据展示、用户输入处理或管理类应用中尤为常见。下面我们将详细探讨这些知识点。 首先，让我们理解...

    JS操作table大全

    在JavaScript的世界里，HTML表格（Table）是一种常用的数据展示方式，而JS操作表格则成为网页动态交互的关键。本文将深入探讨如何使用JavaScript进行表格的创建、修改、删除以及实现一些特殊效果。 首先，我们从...

    js操作table

    本文将深入探讨如何使用JavaScript实现表格的刷新、添加、复制和删除功能。 一、表格刷新 表格的刷新通常涉及到重新加载表格数据。在JavaScript中，你可以通过以下步骤实现： 1. 获取表格元素：首先，你需要获取到...

    jquery案例，为表格动态添加行

    或者使用`.clone()`复制行，实现添加类似行的功能。 总结来说，jQuery使得在HTML表格上进行动态操作变得简单易行，通过`.append()`、`.remove()`等方法，开发者可以快速构建出交互性丰富的数据展示和管理界面。在...

    JS增加行复制行删除行的实现代码

    首先，我们来看提供的代码片段，它定义了一个名为`customerInfoMethod`的对象，该对象包含了三个方法：`copyrow`、`copyrowUpdate`和`deleteRow`，分别用于复制行、更新复制行和删除行。 1. **复制行（`copyrow`和`...

    使用jquery为table动态添加行的实现代码

    在网页开发中，经常需要对表格（table）进行动态操作，比如添加或删除行，以满足用户交互的需求。本文将详细介绍如何使用jQuery实现为table动态添加行的功能。 首先，我们需要理解jQuery的基本用法。jQuery是一个...

    table的td整列拖动交换以及重新排列位置

    在JavaScript中，我们可以利用DOM（Document Object Model）接口来操作这些元素，包括获取、修改和删除等。 1. **事件监听**： 实现拖动功能的关键在于对鼠标事件的监听。我们需要绑定`mousedown`（鼠标按下）、`...

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

    本文将深入探讨如何使用纯JavaScript实现表格的排序、插入、删除、移动行或列以及导出功能，同时还会提到如何增加表头。 首先，让我们讨论表格排序。在JavaScript中，我们可以获取表格元素，然后对数据进行比较以...

    vxe-table-v2.9.24_表格组件_Table_

    1. **增删改查**：vxe-table提供了基本的数据操作功能，允许用户对表格内的数据进行添加、删除、修改和查询。这使得在前端直接处理数据变得更加方便，减少了与后端的交互次数，提高了用户体验。 2. **虚拟滚动**：...

    excel复制数据，粘贴到页面表格插件.zip

    1. **jQuery**：在这个项目中，jQuery被用来操作DOM（文档对象模型）元素，如选取表格元素、添加和删除表格行、获取和设置单元格数据等。例如，`$('table tbody')`可以选取表格的主体部分，`.append()`可以向表格中...

    根据下拉框变化动态填加或者删除表格的行

    在网页开发中，动态地添加或删除表格行是一项常见的需求，尤其在用户需要交互式地管理数据时。本文将深入探讨如何使用DOM（Document Object Model）技术，特别是`cloneNode()`方法，来实现这个功能。结合`SELECT`...

    jQuery操作Table

    - 使用`clone()`复制行，然后修改需要更改的部分，最后插入到表格中。 5. **异步数据加载**： - 结合Ajax，可以实现从服务器动态获取数据并填充到表格中。例如，使用`$.getJSON`或`$.ajax`请求JSON数据，然后用...

    Jquery对于Table的操作一些源码

    在表格中添加或删除行时，可以结合`clone()`（复制元素）、`empty()`（清空内容）和上述的插入删除方法。例如，要添加一行，可以先复制模板行，然后修改内容，最后插入到表格中。 六、表格排序 jQuery本身并不提供...

    js操作table元素实现表格行列新增、删除技巧总结

    在JavaScript中，`doTableRowDelete`函数用于删除指定的行。这个函数通常会根据事件对象（`event`）来找到对应的`TR`元素（即表格行），然后进行删除。它有一个可选参数`tdCount`，用于指定从事件触发的`TD`元素向上...

    HTML表格右键事件JS实现

    为了实现具体的功能，如编辑、复制和删除，你需要为菜单项添加点击事件，并在事件处理函数中编写相应的逻辑。例如，如果用户点击“编辑”选项，你可以获取选中的表格单元格并打开一个输入框让用户修改数据。 此外，...

    JavaScript仿Excel表格演示

    3. **复制行**：复制功能可能涉及克隆选定的行对象，然后将副本插入到表格中。JavaScript的`cloneNode()`方法可以用于创建DOM元素的副本，之后只需调整新行的唯一标识，以便在数据库中正确存储和区分。 4. **事件...

    jQueryUI拖拽效果_拖拽div的值到table表格里面

    此外，`btn_delete.png`可能是一个删除按钮的图片，可用于实现更复杂的交互功能，如删除已添加到表格的数据。 总结，实现jQuery UI拖拽效果的关键在于正确配置`draggable`和`droppable`组件，并确保HTML结构支持...

Magicbox
Global site tag (gtag.js) - Google Analytics