`

jquery 表格增加删除 提交数组

阅读更多
<script type="text/javascript">
/** 
  * 动态添加删除表格行 
  */
 $("document").ready(function(){ 
         //表格的删除按钮事件绑定 
         $("#TbData #del").click(function() { 
        	 if($("#TbData tr").length > 2){ //保留表头和模板行
            	 $(this).parents(".repeat").remove(); 
             }
         }); 
         //第六个表格的添加按钮事件绑定 
         $("#add").click(function(){ 
             $("#tbbody>.template") 
                 //连同事件一起复制 
                 .clone(true) 
                 //去除模板标记 
                 .removeClass("template") 
                 //修改内部元素 
                 //.find(".content") 
                 //.text("新增行") 
                 //.end() 
                 //.find(".del") 
                 //.text("删除") 
                 //.end() 
                 //插入表格 
                 .appendTo($("#tbbody")) 
         });
         
         $("#sub").click(function(){
        	$("input[name='company[]']").each(function(){
        		var va = $(this).val();
	        	alert(va);
        	});
         });
     } )
</script>
  <button id="add">添加行</button>
  <button id="sub">提交</button>
<table id="TbData" width="100%" border="1"> 
      <tbody id="tbbody"> 
       <tr> 
       <th>公司名称</th> 
       <th>联系人</th> 
       <th>操作</th> 
       </tr> 
       <tr  class="template repeat"> 
	       <td><input type="text" id="company"  class="company" name="company[]"></td> 
	       <td><input type="text" id="linkman"  class="linkman" name="linkman[]"></td> 
	       <td><a href="#" id="del"> 删除 </a></td> 
       </tr> 
      </tbody> 
    </table>

 a

  • 大小: 4.7 KB
分享到:
评论

相关推荐

    jqGrid插件--JQuery表格插件

    jqGrid是一款基于jQuery的开源表格插件,专为数据管理和展示设计,提供了丰富的功能和高度的自定义性。它在Web开发中广泛应用于构建高效、交互式的数据网格。以下是关于jqGrid的一些关键知识点: 1. **基本使用**:...

    动态添加/删除表格行并提交内容到后台

    在开发Web应用时,动态添加和删除表格行是常见的需求,尤其在数据管理或表单填写场景中。本文将深入探讨如何使用C#后端和JavaScript前端技术来实现这一功能,为初学者提供一个基础的实践指导。 首先,我们要了解...

    jquery+json自动形成表格插件.zip

    4. **Ajax交互**:jQuery的`$.ajax()`函数或者其简化的版本`$.get()`和`$.post()`,用于异步获取或提交数据,这在获取JSON数据并动态更新表格时非常有用。 其次,JSON(JavaScript Object Notation)是一种轻量级的...

    jQuery 实现批量提交表格多行数据的方法

    在本文中,我们将深入探讨如何使用jQuery来实现批量提交表格中的多行数据。批量提交功能在数据处理中非常常见,特别是在需要用户选择多个记录进行统一操作的场景下,如删除、更新或审核等。以下是对标题和描述中所述...

    jquery添加表格行内编辑代码.zip

    你可以创建一个JavaScript对象数组,其中每个对象对应表格的一行。当用户提交编辑时,更新相应对象的属性,并根据这些数据重新渲染表格。 `css`文件则包含了样式规则,用于美化表格和编辑界面。你可以定义表格的...

    jquery 实现可编辑表格

    为了保存或更新表格中的数据,可以将编辑后的值收集到数组或对象中,或者直接与服务器进行交互。例如,获取当前表格数据的方法如下: ```javascript function getTableData() { var data = []; $('#editableTable...

    JQuery获取表格数据示例代码

    通过以上过程,开发者可以获取到表格中的各种数据,并且可以将它们用于进一步的处理,如更新数据库记录、提交表单数据等。此外,示例中的JQuery方法和选择器的使用非常典型,是对初学者掌握JQuery操作DOM时非常有...

    超实用的jQuery代码段

    超实用的jQuery代码段精选近350个jQuery代码段,涵盖页面开发中绝大多数要点、技巧与方法,堪称史上最实用的jQuery代码参考书,可以视为网页设计与网站建设人员的好帮手。《超实用的jQuery代码段》的代码跨平台、跨...

    JQuery动态添加和删除表格行的方法

    在实际应用中,动态添加和删除表格行的功能能够被用于各种场景,例如在处理表单提交、展示动态数据等场合。熟练使用JQuery进行这些操作,可以使Web页面的用户交互更加流畅和高效。本文介绍了如何利用JQuery快速实现...

    jquery 排序, jquery 动态修改列

    这个文件名暗示了它可能涉及到使用jQuery的Ajax功能提交数据。jQuery的Ajax方法如`$.ajax()`、`$.get()`和`$.post()`使得异步数据交换变得简单。例如,向服务器发送一个POST请求: ```javascript $.post('submit....

    JS实现动态生成表格并提交表格数据向后端

    在JavaScript(JS)中动态生成表格并提交数据到后端是一项常见的前端开发任务,它涉及到DOM操作、事件处理以及与服务器的交互。以下是对这个过程的详细解释: 首先,为了实现动态生成表格,我们需要引入一个...

    基于jQuery实现表格的查看修改删除

    本篇将详细介绍如何利用jQuery来实现一个基础的表格功能,包括查看、修改和删除数据。 首先,我们需要创建一个HTML表格,用于展示数据。在示例代码中,我们看到一个包含员工信息的表格,每一行都有“查看”、“修改...

    jquery.jqGrid-4.5.4

    4. **编辑功能**:jqGrid 支持单元格、行或者整个表格的编辑,包括新增、修改和删除操作,且可实现数据的异步提交。 5. **列自定义**:你可以自由定制每列的显示样式、宽度、可编辑性等属性,甚至可以添加自定义的...

    经典jquery局部刷新增删改查

    7. **示例中的实现**:在这个实例中,可能包含一个表格或其他数据展示结构,用户可以通过点击按钮执行AJAX请求,更新服务器上的数据,并在页面上相应地添加、删除或修改元素,所有操作都只影响页面的部分区域,保持...

    jQuery网页特效任务驱动式教程(微课版)-教材案例.rar

    任务8将教授如何使用jQuery实现表格的排序、筛选、动态添加和删除行等功能,提升数据展示的交互性。 任务9:数组应用特效 数组在jQuery中扮演着重要角色,尤其在处理集合数据时。这个任务会介绍如何利用jQuery操作...

    jQuery EasyUI实例源码

    这个实例源码“人员管理”是展示如何使用jQuery EasyUI进行数据操作和交互的一个典型应用,涵盖了列表展示、添加、编辑和删除等功能,同时也涉及到与后台的数据交换,通常采用JSON格式。 首先,jQuery EasyUI的核心...

    jqGrid表格数据修改删除代码.zip

    2. **配置参数**:初始化时,你可以传递一系列参数来定制表格的行为,例如数据源(可以是本地数组或远程服务器)、列定义、分页设置等。例如,`data`参数用于指定数据,`colModel`用于定义列的显示和行为。 3. **...

    jquery中表示必须录入项

    在jQuery和Web开发中,表示“必须录入项”通常涉及到表单验证,确保用户在提交数据之前填写了必要的字段。以下是从给定的文件中提取的相关知识点: 1. **表单验证**:在Web表单中,为了确保数据的完整性和准确性,...

Global site tag (gtag.js) - Google Analytics