动态增加删除行

最新推荐文章于 2021-05-14 18:40:36 发布
最新推荐文章于 2021-05-14 18:40:36 发布
阅读量1.4k 收藏 1
点赞数
分类专栏： Ajax 文章标签： input function button border table class
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dickwin/article/details/607787
版权

 

曾经在工作中遇到要动态增加text类型的情况，我觉得这个demo不错：（

一定能满足您的要求 呵呵

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>demo</title>

<style>
TD,INPUT{font-size:12;}
</style>
</head>

<body bgcolor=EEEEEE>
<form name="frm" action="about:结果页面" method=post >
<h4 align=center>demo</h4>

<table align="center" bordercolor=cccccc border=1  width=100% >
<tr>
<td width=500>
</td>
<td align=right>
      <input type="button"  value="增加" class="bottom" οnclick="addDetailProcess();">&nbsp;    
      <input type="button"  value="删除" class="bottom" οnclick="delDetailProcess();">&nbsp;    
      <input type="button"  value="完成" class="bottom" οnclick="submitProcess();">
     
</td>
</tr>
</table>
<div width=100% id=thedetailtableDIV>
<table align="center" bordercolor=cccccc border=1 width=100% >
  <tr bgcolor=eeeeee id="trDetailTitles">
    <td ><input type=checkbox οnclick="selectallcheckbox(this)"></td>
    <td >明细ID*</td>
    <td >明细NAME</td>
  </tr>
  <tbody id="tbDetailUsed" >
<tr>
<td ><input type="checkbox" name="record_select" ></td>
<td ><input type="text" name="detail_id" value='' ></td>
<td ><input type="text" name="detail_name" value='' ></td>
</tr>

<tr height=0 ><td colspan=100 height=0 > 合计</td></tr>
  </tbody>

</table>
</div>
</form>

<!--复制的内容-->
<table id="tbDetailPrepare" style="display:none">
<tr>
<td ><input type="checkbox" name="record_select" ></td>
<td ><input type="text" name="detail_id" value='' ></td>
<td ><input type="text" name="detail_name" value='' ></td>
</tr>
</table>


<input name="theHistoryRecord" type=hidden value="">
</body>

</html>

<script language=javascript>

window.onload = historyOncemore;
window.onbeforeunload = fixHistory;

function fixHistory()//记住历史
{
document.all("theHistoryRecord").value=document.all("thedetailtableDIV").innerHTML.replace(//n/g,"");
}

function historyOncemore()//恢复历史
{
if (document.all("theHistoryRecord").value!="")
{document.all("thedetailtableDIV").innerHTML=document.all("theHistoryRecord").value;
}
}

function selectallcheckbox(obj)//全选或全不选
{
var tureorfalse=obj.checked;
var theDetail=tbDetailUsed.rows;
for(var i=0;i<theDetail.length-1;i++)
{
theDetail[i].all("record_select").checked=tureorfalse;
}
}


function addDetailProcess(afterRowIndex)//增加明细
{
var alltbDetailUsed= document.all("tbDetailUsed").rows;
var theFirstSelectedDetail;
if (afterRowIndex==null)
{
  theFirstSelectedDetail=alltbDetailUsed.length-2;
}
else theFirstSelectedDetail=afterRowIndex;
var newRow = document.all("tbDetailPrepare").rows[0].cloneNode(true);
var desRow = alltbDetailUsed[theFirstSelectedDetail+1];
desRow.parentElement.insertBefore(newRow,desRow );

}

function delDetailProcess()//删除明细
{
var alltbDetailUsed= document.all("tbDetailUsed").rows;
if (confirm("确定选择正确并且要将这些明细删除")==false) return false;
for(var i=0;i<alltbDetailUsed.length-1;i++)
{
if (alltbDetailUsed[i].all("record_select").checked==true)
{
document.all("tbDetailUsed").deleteRow(i);
i=i-1;
}
}
}

function submitProcess()
{
      document.frm.submit();
}


</script>

 

dickwin
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery动态添加删除行 点击按钮动态添加行或动态删除行
08-07
jquery动态添加删除行 点击按钮动态添加行或动态删除行代码 删除后序号重新排列
JavaScript 动态删除行
博海软件
08-05 118
用JS动态删除表格中行信息，代码如下： function removeRow (obj) { var clickedRow = obj; while(clickedRow.tagName != "TR"){ clickedRow = clickedRow.parentNode; } clickedRow.parentNode.removeChild(clickedRow);...
动态删除行和列
IT与开发人员的地盘
05-26 157
经常需要动态删除程序中的行和列，但通常很难获得。 Excel 2002（XP）中包含的VB-6帮助文件并不总是提供执行此操作所需的帮助。 通过记录宏，可以开发以下代码段： SubMacro1() ' 'Macro1Macro 'Macrorecorded9/16/2009byEbernon ' ' Rows("1:20").Select Selection....
新增及删除Grid行
weixin_33918357的博客
10-10 209
示例效果如下 点击 新增 按钮 Grid将增加一空行 用于输入 点击 删除 按钮 将删除该行记录并重新绑定Grid 相关代码如下 HTML部分 &lt;%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="PrivateWork_Default" %&gt; &...
动态删除某行的功能是如何实现的呢？
weixin_45147894的博客
10-05 133
点击删除后 再点击删除按钮后: 这个是如何实现的呢？ 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title&g...
jquery 动态增加删除行的简单实例(推荐)
10-21
删除行的操作相对简单，`deleteRow` 函数中，直接使用 `$(obj).parent().parent().parent().remove();` 删除当前行，然后根据需要重新排序表格的序号。 总结一下，jQuery 动态增加删除表格行的关键在于： 1. 使用 ...
jquery表格动态添加删除行代码.zip
07-05
本示例“jquery表格动态添加删除行代码”利用jQuery的强大功能，为用户提供了一个直观且用户友好的表格管理体验。这个代码实现了一个功能，即在表格中动态地添加和删除行，这对于数据展示和编辑是非常实用的。 首先...
动态增加删除行.html
05-26
标题中的“动态增加删除行.html”暗示我们这篇内容可能与前端开发有关，特别是涉及到HTML页面中动态操作表格（table）的行（row）增删功能。这种技术在Web应用程序中非常常见，允许用户交互式地管理数据展示。下面将...
JS动态增加删除行
03-06
在JavaScript（JS）编程中，动态增加和删除行是一项常见的任务，特别是在开发表格或表单相关的Web应用时。这项技术可以提升用户体验，使用户能够实时地添加或移除数据，无需刷新整个页面。以下是对这一知识点的详细...
七天学会javascript之动态删除某行（44）
weixin_45147894的博客
06-01 206
动态删除某行 语法：table.deleteRow(index) 用来删除指定位置的行。 row.deleteCell(index)用来/删除指定位置的单元格; DOM方法：removeChild(node)用来删除子节点（元素）； parentNode 用来获取节点（元素）的父节点 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>&...
jQuery中动态添加和删除行
chaplinlong的博客
04-28 1186
这里，先看网页代码。<body> <table width="800" border="0" cellspacing="0" cellpadding="0"> <tr bgcolor="#EBE7DC"> <td><input type="checkbox"/></td> <td>姓名</td> <td>性别</td> <td>卡号</td> <td>会
Jquery动态增加行和删除行的操作
书写人生
01-05 1万+
var row_count = 0;  function addNew()  {  row_count++;  var table1 = $('#table1');  var firstTr = table1.find('tbody>tr:first');  var row = $("");  var td = $(""+row_count+"");  td.append($(""
js动态删除行多行删除，和动态增加行
wangql521的专栏
10-07 1175
var rowid=1;  function $(id){  return document.getElementById(id);  }  function addRow(){  var _tab=$( "test");   //表格行数   var rows = _tab.rows.length ;  var _row=_tab.insertRow();  ro
JavaScript动态添加/删除表格行
热门推荐
w-ind'的博客
12-16 1万+
使用原生JavaScript来解决简单的table行动态增删问题
python dict 删除元素_python中如何删除dict元素？
weixin_39536010的博客
12-19 5642
我们知道如果我们在网络上发布不当、不正确的言论。网站会把我们的评论删除。正是因为是不正确的，它就没有存在的必要。之前小编向大家介绍了在python字典里添加元素的三种方法(https://www.py.cn/jishu/jichu/21769.html)，但是如果在字典中输入错误的代码，我们就要删除，不然会影响我们程序的编写。那么如何在字典里删除元素呢？小编这里有四种方法，来看看吧。1、pop()...
table中动态删除当前行
猿小白的博客
05-14 3398
有时候我们需要动态的删除table的当前行，实现方法很多中，并不唯一，需要引入jQuery相关依赖才能使用。 2、JS代码 <script type="text/javascript"> //obj是点击行的this function deleteTr(obj) { //通过this找到父级元素节点 var tr = obj.parentNode.parentNode; //找到表格 var tbody ..
js动态增加行 删除行
03-17 5807
//动态增加行 function addRow(tab){ var title = ""; var table = document.getElementById(tab); var newRow = table.insertRow();// var newCell = newRow.insertCell(); if(tab=="projectTab"){ title = $("#p
avue-crud 使用_创建和使用CRUD存储过程
culuo4781的博客
07-26 2676
avue-crud 使用 The Data Storage Layer consists of SQL Server and database objects. The Data Access Layer is client code written in a language such as C#, VB, VB.Net, Java, PHP etc. The Data Access ...
我来告诉你，那些博客中的gif动态图是怎么弄的？
慢工出细活
06-19 8978
大家都知道，图片比单纯的文字给人的视觉冲击力更大，表达的内容也更直观易懂，经常在博客上看到动态的gif图，那这些gif动态图是怎么制作的呢，特别是Android移动开发者，写了一个demo，写博客时，想要把这个demo的实体画面展示给大家看，可是demo运行在手机上，怎么办呢，难道靠截屏显示静态图片吗？显然不是的，接下来我就教大家怎么把手机上运行的demo制作成gif图在博客中显示。 一、整体思
js动态添加删除表格行
最新发布
06-10
删除行： ```javascript // 获取表格对象 var table = document.getElementById("myTable"); // 删除最后一行 table.deleteRow(-1); ``` 注意，这只是一个简单的示例，实际应用中需要根据具体需求进行修改。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值