js table 添加行 删除行 复制行

最新推荐文章于 2024-07-12 10:23:58 发布
最新推荐文章于 2024-07-12 10:23:58 发布
阅读量172 收藏
点赞数
分类专栏： javascript 文章标签： J# JSP .net HTML F#
<!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" οnkeyup="value=value.replace(/[^\d\.]/g,'')" size="4" name="Size" id="Size1"/></td>
<td nowrap="" width="8%"><input type="text" οnkeyup="value=value.replace(/[^\d\.]/g,'')" οnblur="CalculateTotal()" size="4" name="Qty" id="Qty1"/></td>
<td nowrap="" width="10%"><input type="text" οnkeyup="value=value.replace(/[^\d\.]/g,'')" size="4" name="NetPrice" id="NetPrice1"/></td>
<td nowrap="" width="10%"><input type="text" οnkeyup="value=value.replace(/[^\d\.]/g,'')" οnblur="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" οnclick="addOrderRow('detailItemBody',2,11,this,'add')" value="Add" id="btnAdd1" name="btnAdd"/>
<input type="button" οnclick="addOrderRow('detailItemBody',2,11,this,'copy')" value="Copy" id="btnCopy" name="btnCopy"/>
<input type="button" οnclick="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>
iteye_5269
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jstable添加行删除行复制行
02-28
用js实现对table添加行、删除行、复制行的操作。
纯JS table动态增加行
Everyone_boy的博客
08-21 7780
JS代码： function addRow(tableId) { var tb=document.getElementById(tableId); var tbRows=tb.rows; var newTr=tb.insertRow(tbRows.length); newTr.align="center"; var newTd0=newTr.insertCell(0); var newTd1=newTr.insertCell(1); var newTd2=newTr.insertCel
js、table表格 插入、新增、删除自定义行
qiang928的博客
11-19 2296
js、table表格 插入、新增、删除自定义行
js table 常用操作 删除 复制（克隆） 添加 某一行
04-02 1403
//删除 某行tr function deleterow(obj){ // var flag=confirm("确定要删除吗？"); //提示是否要删除 flag=true/false ( true删除 false不删除) if(flag==true){ var tr=obj.parentNode.parentNode; //parentNode父节点 ...
js table 常用操作 删除 复制（克隆） 添加 某一行
Half of if的博客
08-29 6799
//删除 某行tr function deleterow(obj){ // var flag=confirm("确定要删除吗？"); //提示是否要删除 flag=true/false ( true删除 false不删除) if(flag==true){ var tr=obj.parentNode.parentNode; //parentNode父节点 var ...
为Xcode9.1添加行操作快捷键 复制行 删除行 上下移动行
11-28
之前在做JAVA开发时,使用eclipse过程中,用的最多也是特喜欢的就是删除当前行和复制当前行的快捷键。然而在转向iOS开发时,Xcode是不支持这两个快捷键的,一次偶然发现有个小窍门可以为Xcode来添加这两个快捷键。
使用jquery为table动态添加行的实现代码
10-28
在网页开发中，经常需要对表格（table）进行动态操作，比如添加或删除行，以满足用户交互的需求。本文将详细介绍如何使用jQuery实现为table动态添加行的功能。 首先，我们需要理解jQuery的基本用法。jQuery是一个...
JS增加行复制行删除行的实现代码
10-26
首先，我们来看提供的代码片段，它定义了一个名为`customerInfoMethod`的对象，该对象包含了三个方法：`copyrow`、`copyrowUpdate`和`deleteRow`，分别用于复制行、更新复制行和删除行。 1. **复制行（`copyrow`和`...
JS 添加行,拷贝行,删除行
03-23
在JavaScript（JS）中，处理动态表格，特别是添加、复制和删除行的操作是网页交互设计中的常见需求。这种功能在数据展示、用户输入处理或管理类应用中尤为常见。下面我们将详细探讨这些知识点。 首先，让我们理解...
js用克隆(clone)的方法动态添加表格行
czl_danny的专栏
12-24 9315
<br />在js中用克隆(clone)的方法动态添加表格(table)行(tr):<br />用javascript的克隆方法添加表格的行要比用innerHTML方法代码简洁的多,主要使用Obj.cloneNode(true);方法进行克隆.<br />看下面的代码:<br /><select onchange="add_row(parseInt(this.options[this.selectedIndex].text,10),document.getElementById(’cloneTR’))"><
js动态添加表(table、行).html
08-24
js动态添加表(table、行).html 点击可直接运行，或查看源码
table JS 添加行和删除行
06-07
table JS 添加行和删除行 实现JS添加table的一行和删除一行技术
【转】js table 添加行 删除行 复制行
AlphaHinex的专栏
12-21 3415
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 无标题文档 Item Item No Nickname Cleats / Fl
使用js实现简单地对表格添加行和删除行
sleeping_xixi的博客
05-13 9162
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt; new document &lt;/title&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=gbk"/&gt; &lt;scrip
js 操作 table 复制行 插入行 获取index ...
Truong的专栏
03-22 2286
一、获取当前行的index：trRow.rowIndex;   二、表中插入行：var row=table.insertRow(index);   三、复制行：var copyRow=trRow.cloneNode(true);   四、在指定行前插入行：trRow.parentNode.insertBefore(copyRow,trRow);
js动态给表格添加一行、删除一行
热门推荐
rmkloveme
10-30 1万+
最近写代码遇到这个需求，特地总结了一下写了个demo，如下所示： 代码： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;new document&lt;/title&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=g
记一次 .NET某上位视觉程序 离奇崩溃分析
最新发布
一线码农的专栏
07-12 228
在大工控领域里，这是我见过第三例bit位翻转导致的程序崩溃，太无语了，恶魔到底是不是旁边的伺服电机?
element-ui table行点击获取行索引(index)并利用索引更换行顺序
04-28
在获取到索引后，可以利用 Vue.js 提供的数组操作 API 来更改表格的数据源，从而达到更换行顺序的效果。 具体实现步骤如下： 1. 在 table 组件上添加 row-click 事件： ``` <el-table @row-click="handleRowClick...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值