JS-Jquery实现动态的add和delete<input type="text">

最新推荐文章于 2022-12-20 15:17:09 发布
最新推荐文章于 2022-12-20 15:17:09 发布
阅读量115 收藏
点赞数
分类专栏： JS 文章标签： JavaScript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_10129/article/details/82282119
版权

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>JS-demo01.html:JS动态的添加和删除</title>
 
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery-1.3.2.js"></script>
 <script type="text/javascript">
  /*
   *@author Roin.li
   *@time 2012-02-15 12:16:00
   *@decription          <input type="text">实现动态的js"添加","删除"
   */
  function toFpcyAdd(){// 添加
   //var trSize = $("#fpcyTable").find("tr:gt(2)").size();
   var trSize = $("#fpcyTable").find("tr:gt(2)").length;
   if(trSize >= 5){
    alert("添加数据不能超过5条");
    return;
   }
   $("#fpcyTable").find("tr:eq(3)").clone(true).appendTo($("#fpcyTable")).find("input[type='text']").val("").end().find("td:eq(0)").text(trSize + 1).end().find("input:eq(0)").focus();
  }
  
  function toFpcyDelete(obj){// 删除
   debugger;
   var $objparents = $(obj).parents("tr:eq(0)"); // parents的祖先元素是?  是table吗? 不是，看错了，input后面还有个td呢，td之后是tr,所以tr是祖先元素
   var textvalue = $objparents.find("td:eq(0)").text();
   var trsize = $("#fpcyTable tr:gt(2)").size();
   if(trsize > 1){
    $objparents.nextAll("tr").each(function(index,item){
     $(item).find("td:eq(0)").text(textvalue - 0 + index);
    })
    $objparents.remove();
   }
   //alert(111);
   //var textValue = $(this).find("tr:eq(0)").text
   //alert(textValue);
  }
  
  
 </script>
  </head>
 
  <body>
     <table class="commandTable" cellspacing="0px" id="fpcyTable">
   <tr><td class="mb_tit_1" colspan="5"></td></tr>
   <tr><td class="tableCaption" colspan="5">查验条件列表</td></tr>
   <tr><td class="tableTitle" align="center">序号</td><td class="tableTitle">发票代码</td><td class="tableTitle">发票号码</td><td class="tableTitle">操作</td></tr>
   <tr>
    <td class="td_02">1</td>
    <td class="td_02"><input type="text" size="20" name="nfpdm"/></td>
    <td class="td_02"><input type="text" size="20" name="nfphm"/></td>
    <td class="td_02"><a href="javascript:void(0)"><input type="button" id="toFpcyDelete" value="删除" οnclick="toFpcyDelete(this)"/><!-- <img title="删除" alt="删除" src="<c:out value="${pageContext.request.contextPath}"/>/images/table/docdelete.gif" border="0" οnclick="javascript:gotoDelete(this);" /> --></a></td>
   </tr>
  </table>
  <table><tr><td><input type="button" id="toFpcyAdd" value="添加" οnclick="toFpcyAdd()"/></td></tr></table>
  </body>
</html>

iteye_10129
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
测试delete input实验
Monkey·D·Boy的秘宝
02-24 301
实验环境：11.2.0.1.0 +ASM 一查看归档路径 archive log list; show parameter db_recover show parameter log_archive RMAN> list archivelog all; asmcmd +fra/ghyyk/ARCHIVELOG/2020_02_23 只设置了一路归档存放路径（只要进行日志切换，就会在该路径下生...
JS Table Update Delete Add
farmwang的专栏
05-12 216
window.parent.UpdateRefid(GetData()); window.parent.DelRefid(GetData()); function DelRefid(data) { var tr = document.getElementById('bid_'+data.Refid); tr.paren...
js 对数组的操作 add、delete、获取
weixin_33695082的博客
11-10 4103
2019独角兽企业重金招聘Python工程师标准>>> ...
js 中set的用途 add delete has clear
小武的博客
12-08 692
本文中用途是存一个表格的id,用来做checkbox的添加，删除操作 1. 首先讲解操作 let set = new Set([1, 2, 3, 4, 4]); // 添加数据 5 let addSet = set.add(5); console.log(addSet); // Set(5) {1, 2, 3, 4, 5} // 删除数据 4 let delSet = set.delete(4); console.log(delSet); // true // 查看是否存在数据 4 let ...
JS 对象创建 添加删除修改访问
haibin8473的博客
12-19 200
js 中 splice 使用方法介绍 。 一、前言 刚刚在使用splice()方法,发现这个方法返回的是删除后的数组元素,如果要获取删除指定元素后的数组,直接调用原来的数组即可！因为splice()会改变原来数组！之前对splice()方法一直不熟悉,写个随笔记录一下。 官方说明: 二、定义和用法 splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。 注意：该方法会改变原始数组。 三、语法 arrayObject.splice(index,howmany,item1,…,itemX)..
jQuery实现表格的增加、修改、删除、保存代码
12-30
在jQuery中，增加表格行通常是通过动态创建`<tr>`元素并将其插入到`<tbody>`内来实现的。首先，我们需要创建一个HTML表单，让用户输入新行的数据。然后，当用户提交表单时，捕获这些值并构建新的表格行。以下是一个...
Jquery实现select multiple左右添加和删除功能的简单实例
10-22
<input type="button" id="delete" name="delete" value="<<移除" /> <br /> <input type="button" id="selectdown" name="selectdown" value="下移∨" /> </td> <td> <select id="select_list" name="select_...
jQuery实现表格数据增、删、改、查
06-01
var $inputs = $('<input type="text">').val($row.find('td:eq(0)').text()), $inputs2 = $('<input type="number">').val($row.find('td:eq(1)').text()); $row.find('td').eq(0).html($inputs); $row.find('...
jquery实现json数据填充到table表格中并且实现remove add 数据
07-08
newRow.append($('<td><input type="text"></td>')); newRow.append($('<td><input type="text"></td>')); // 添加更多td $('#your_table_id').append(newRow); }); ``` 删除功能则需要监听表格中的删除按钮...
js实现上传文件添加和删除文件选择框
10-21
在JavaScript中实现文件上传功能时，通常会遇到浏览器兼容性问题，特别是涉及到文件选择框的动态添加和删除。本文将详细介绍如何使用JavaScript实现这一功能，并解决在Firefox等浏览器中的兼容性问题。 首先，我们...
js基础问题
qq_38862234的博客
12-20 766
js
Js添加元素、删除元素误区详解【push()和add()；splice()和remove()】
赏樱看雪撸代码
09-12 1万+
添加元素之误区一，push()和add()使用及区别 push()方法是给数组尾巴添加一个或多个元素,返回的是添加数组后该数组长度。 测试代码： var arr = [1,2,3,4]; var arrlength = arr.push(5); console.log("arr长度为："+arrlength+"\narr值为："+arr); add()方法是不能操作数组的，不然会报错的...
Html Dom add and delete element
勍的空间
11-07 1307
Javascript is sometimes troublesome. this is some code fragments that add and delete Html element.(PS: cause of this site issue, I found that the variable newInputStr is not showed correctly without s
js动态实现增加删除input框及在input框内添加元素
热门推荐
**My Coding Family**
03-04 1万+
闲话不多说，直接放全代码！喜欢的朋友不妨加个点个赞加个关注！您的支持就是怂怂最大的鼓励！ &amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;html lang=&amp;amp;amp;amp;amp;amp;amp;amp;quot;en&amp;am
深入理解JS的delete
weixin_33890499的博客
02-07 607
原文链接: Understanding delete原文作者: Kangax原文日期: 2010年01月10日翻译日期: 2014年02月07日翻译人员: 铁锚!!!!!!!!草稿版本的翻译完成以后，无意中搜索发现了另外一篇翻译，也是同一篇原文，比我翻译的好。 justjavac,迷渡是我很尊敬的一位前辈, 链接如下:javascript 中的 delete虽然说花了2个星期,进度也不理想,但...
js delete 用法(删除对象属性及变量)
日常笔记/总结/系列知识梳理
01-29 1万+
1.对象属性删除 function fun(){ this.name = 'mm'; } var obj = new fun(); console.log(obj.name);//mm delete obj.name; console.log(obj.name); //undefined 2.变量删除 var name = 'lily'; delete name; con
js add delete 转义字符 demo
rugaxm的专栏
09-12 1061
/*添加附件  click*/     var contentindex=0;     function addFileHtml(){         var contentHTML="删除";         document.getElementById('addfile').innerHTML=document.getElementById('addfile').innerHTML+
毕业设计asp.net投票管理系统三层-qkr源码含文档工具包
最新发布
08-15
毕业设计asp.net投票管理系统三层-qkr源码含文档工具包 asp.net，数据库sqlserver，开发工具用Microsoft Visual Studio 在线投票系统 投票结果 投票结果 投票人数 如修改 投票项目 编辑删除 用户登陆 权限管理 帐户管理 包含：源码、数据库脚本、论文、答辩ppt、环境工具包（在说明文档中）
<h1>通讯录</h1> <button class="add-btn">添加联系人</button> <input type="text" id="search-input" placeholder="搜索姓名或电话"> <table> <thead> <tr> <th>姓名</th> <th>电话</th> <th>邮箱</th> <th>操作</th> </tr> </thead> <tbody id="contact-list"> <!-- 数据渲染 --> </tbody> </table> <!-- 分页按钮 --> <div id="page-buttons"></div> <!-- 弹出层，用于添加或编辑联系人 --> <div id="modal" class="modal" style="display: none;"> <div class="modal-content"> <span class="close">×</span> <form> <div class="form-group"> <label for="name">姓名</label> <input type="text" id="name" name="name" required> </div> <div class="form-group"> <label for="phone">电话</label> <input type="text" id="phone" name="phone" required> </div> <div class="form-group"> <label for="email">邮箱</label> <input type="text" id="email" name="email" required> </div> <button id="save-btn">保存</button> <button id="cancel-btn">取消</button> </form> </div> </div>帮我加入一个搜索框可以查找到指定的内容，让数据具有添加删除和编辑的功能，编辑的时候增加弹窗
05-22
好的，你需要添加一些 JavaScript 代码来实现这些功能。以下是一个简单的实现： ``` // 定义一个数组用于存储联系人数据 let contacts = []; // 获取页面元素 const addBtn = document.querySelector('.add-btn'); const searchInput = document.querySelector('#search-input'); const contactList = document.querySelector('#contact-list'); const pageButtons = document.querySelector('#page-buttons'); const modal = document.querySelector('#modal'); const modalContent = document.querySelector('.modal-content'); const closeBtn = document.querySelector('.close'); const saveBtn = document.querySelector('#save-btn'); const cancelBtn = document.querySelector('#cancel-btn'); // 定义一些常量 const PAGE_SIZE = 10; // 每页显示的联系人数 const MAX_PAGES = 5; // 最多显示的页码数 // 获取指定页码的联系人数据 function getContacts(page) { const start = (page - 1) * PAGE_SIZE; const end = start + PAGE_SIZE; return contacts.slice(start, end); } // 计算总页数 function getTotalPages() { return Math.ceil(contacts.length / PAGE_SIZE); } // 渲染联系人列表 function renderContactList(page) { const contacts = getContacts(page); let html = ''; contacts.forEach(contact => { html += ` <tr> <td>${contact.name}</td> <td>${contact.phone}</td> <td>${contact.email}</td> <td> <button class="edit-btn" data-id="${contact.id}">编辑</button> <button class="delete-btn" data-id="${contact.id}">删除</button> </td> </tr> `; }); contactList.innerHTML = html; } // 渲染分页按钮 function renderPageButtons(currentPage) { const totalPages = getTotalPages(); let html = ''; if (totalPages > 1) { const startPage = Math.max(currentPage - Math.floor(MAX_PAGES / 2), 1); const endPage = Math.min(startPage + MAX_PAGES - 1, totalPages); for (let i = startPage; i <= endPage; i++) { html += `<button class="page-btn ${i === currentPage ? 'active' : ''}" data-page="${i}">${i}</button>`; } } pageButtons.innerHTML = html; } // 显示弹窗 function showModal(contact) { modal.style.display = 'block'; if (contact) { modalContent.dataset.mode = 'edit'; modalContent.dataset.id = contact.id; document.querySelector('#name').value = contact.name; document.querySelector('#phone').value = contact.phone; document.querySelector('#email').value = contact.email; } else { modalContent.dataset.mode = 'add'; modalContent.removeAttribute('data-id'); document.querySelector('#name').value = ''; document.querySelector('#phone').value = ''; document.querySelector('#email').value = ''; } } // 隐藏弹窗 function hideModal() { modal.style.display = 'none'; } // 添加联系人 function addContact(contact) { contact.id = new Date().getTime(); // 生成一个唯一的 ID contacts.push(contact); } // 修改联系人 function editContact(id, contact) { const index = contacts.findIndex(c => c.id === id); if (index !== -1) { contacts.splice(index, 1, contact); } } // 删除联系人 function deleteContact(id) { const index = contacts.findIndex(c => c.id === id); if (index !== -1) { contacts.splice(index, 1); } } // 初始化页面 function init() { // 绑定事件 addBtn.addEventListener('click', () => { showModal(); }); searchInput.addEventListener('input', () => { const keyword = searchInput.value.trim().toLowerCase(); const filteredContacts = contacts.filter(contact => { return contact.name.toLowerCase().includes(keyword) || contact.phone.includes(keyword); }); renderContactList(1); renderPageButtons(1); }); contactList.addEventListener('click', event => { const target = event.target; if (target.classList.contains('edit-btn')) { const id = Number(target.dataset.id); const contact = contacts.find(c => c.id === id); showModal(contact); } else if (target.classList.contains('delete-btn')) { const id = Number(target.dataset.id); deleteContact(id); renderContactList(1); renderPageButtons(1); } }); pageButtons.addEventListener('click', event => { const target = event.target; if (target.classList.contains('page-btn')) { const page = Number(target.dataset.page); renderContactList(page); renderPageButtons(page); } }); closeBtn.addEventListener('click', () => { hideModal(); }); saveBtn.addEventListener('click', event => { event.preventDefault(); const name = document.querySelector('#name').value.trim(); const phone = document.querySelector('#phone').value.trim(); const email = document.querySelector('#email').value.trim(); if (name && phone && email) { const contact = { name, phone, email }; const mode = modalContent.dataset.mode; const id = mode === 'edit' ? Number(modalContent.dataset.id) : null; if (mode === 'add') { addContact(contact); } else if (mode === 'edit' && id) { editContact(id, contact); } renderContactList(1); renderPageButtons(1); hideModal(); } }); cancelBtn.addEventListener('click', () => { hideModal(); }); // 初始化数据 for (let i = 1; i <= 50; i++) { addContact({ name: `联系人${i}`, phone: `13800000000${i}`, email: `test${i}@example.com` }); } renderContactList(1); renderPageButtons(1); } // 页面加载完成后初始化页面 document.addEventListener('DOMContentLoaded', () => { init(); }); ``` 你需要将这些代码添加到你的 HTML 文件中，并确保正确引入了 jQuery 库。然后你需要在页面中添加一个 ID 为 `search-input` 的搜索框，并在表格中的每一行中添加一个“编辑”按钮和一个“删除”按钮。你还需要在页面底部添加一个 ID 为 `page-buttons` 的容器，用于渲染分页按钮。最后，你需要添加一个 ID 为 `modal` 的弹窗，用于添加或编辑联系人。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值