`
zengshaotao
  • 浏览: 787919 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

增加删除table行

 
阅读更多

<div id="beneInfo">
   <p>受益人信息</p>
   <table width="100%"  cellpadding="1" cellspacing="0" class="mainTable" id="zeng">
    <tr id="title">
     <td class="bottomBorder">姓名</td>
     <td class="bottomBorder">证件类型</td>
     <td class="bottomBorder">证件号码</td>
     <td class="bottomBorder">受益顺序</td>
     <td class="bottomBorder">受益比例</td>
     <td class="bottomBorder">与被保人关系</td>
    </tr>    
    <tr>
     <td colspan="6" align="right">
      <input type="button" value="增加" name="add" id="add" >
      <input type="button" value="删除" name="del" id="del">
     </td>
    
    </tr>
   </table>
  </div> 

 

<script>

var count=0;
   
   //页面加载完后执行 shaotao.zeng 2011-06-13
   $(function(){
    $("#appAndInsured").val("312");
    $("#CLASSCODE").focus();
    $("#benePers").val("4");
    $("select[name=relInsure]").val("0");
    
    showMainInsure();
    <#if message?default('') != ''>
     showSuccessDiv("${message}");
    </#if>
    $("#beneInfo").css('display','none');
    
    //动态添加行
    $("#add").click(function(){
    count++;
    var newDiv="<tr id='tr"+count+"'>"
         +"<td><input type='text' id='name"+count+"' name='name"+count+"' size=20/></td>"+
         "<td><input type='text' id='name"+count+"' name='name"+count+"' size=15/></td>"+
         "<td><input type='text' id='name"+count+"' name='name"+count+"' size=32/></td>"+
         "<td><input type='text' id='name"+count+"' name='name"+count+"' size=10/></td>"+
         "<td><input type='text' id='name"+count+"' name='name"+count+"' size=10/></td>"+
         "<td><input type='text' id='name"+count+"' name='name"+count+"'/></td>"+
         "</tr>";
        
     $("#title").after(newDiv);
    })
    
    $("#del").click(function(){
     //$("#zeng tr").empty();//清空id为zeng的table下的所有tr
     
     // $("#zeng tr:not(:first)").empty();
     
     $("[id='tr"+count+"']").empty();//删除当前行
     
     count--;
    })
    
   })

分享到:
评论

相关推荐

    添加删除TABLE行

    javascript添加删除table行

    js 操作 增加删除Table行

    本文将深入探讨如何使用JavaScript来动态地增加和删除表格(Table)的行。 首先,我们需要了解HTML表格的基本结构。一个基本的表格由`&lt;table&gt;`元素、`&lt;tr&gt;`(表格行)元素、`&lt;td&gt;`(表格数据单元格)元素组成。如果...

    JQuery动态添加删除table行.

    在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作,包括动态地添加和删除表格行。本文将深入探讨如何使用jQuery实现这一功能,以提高网页交互性。 一、HTML基础 首先,我们需要一个基本...

    JS动态添加、删除Table行排序(删除整行、删除整列)

    2. **删除Table行:** 删除整行通常涉及获取要删除的行的引用,然后使用`removeChild()`方法。例如,如果用户点击了某行,我们可以这样删除: ```javascript function deleteRow(row) { var table = row....

    table JS 添加行和删除行

    在本话题中,我们将深入探讨如何使用JavaScript来添加和删除HTML表格(table)中的行。这对于构建数据展示或者管理界面非常实用。 首先,让我们了解HTML表格的基本结构。一个简单的HTML表格由`&lt;table&gt;`标签定义,每...

    javascript table 增加删除行,巧妙实现

    在JavaScript中,表格(Table)是网页数据展示的常用元素,而动态地增加或删除行则是常见的交互需求。本文将深入探讨如何巧妙地利用JavaScript来实现这个功能。 首先,我们需要了解HTML中的`&lt;table&gt;`元素及其相关...

    HTML TABLE批量添加行与删除行

    HTML TABLE批量添加行与删除行.javascript实现。

    利用jquery给指定的table动态添加一行、删除一行的方法

    这篇文章主要介绍了如何使用jQuery在指定的HTML表格(table)中动态地添加和删除行。jQuery是一种广泛使用的JavaScript库,它简化了DOM操作,包括在表格中动态修改内容。 首先,我们要理解HTML表格的基本结构,一个...

    js table添加删除行

    js table添加、删除行。点“添加”按钮可以添加一行,每行后面都有一个删除按钮,可以删除所在行。

    javascript增加和删除table行及验证和遮罩

    javascript增加和删除table行及验证和遮罩 javascript增加和删除table行及验证和遮罩 javascript增加和删除table行及验证和遮罩

    table动态增加删除行列

    使用javascript实现table动态增加删除行列。

    jstable添加行删除行复制行

    在处理表格(Table)元素时,JavaScript可以帮助我们实现实时的动态操作,比如添加、删除和复制行。本文将详细讲解如何使用JavaScript来实现这些功能。 首先,我们需要了解HTML中的`&lt;table&gt;`元素。它用于创建表格,...

    Js实现动态添加删除Table行示例

    在介绍Js实现动态添加和...以上知识点构成了“Js实现动态添加删除Table行示例”文章的核心内容。读者在理解并掌握了这些知识点后,就能够灵活地运用JavaScript技术来实现各种对表格行的动态操作,提升网页的交互能力。

    bootstrap table实现双击可编辑、添加、删除行功能

    本文实例为大家分享了bootstrap table双击可编辑的具体代码,供大家参考,具体内容如下 html: &lt;table class=table id=para_table&gt; 名称 值 操作 &lt;td style=tex

    常用的js动态增加(删除)table数据行的功能

    在JavaScript中,动态地添加或删除表格数据行是常见的需求,尤其在开发交互式Web应用时。本篇文章将深入探讨如何实现这些功能,并提供相关的源码示例。 首先,我们来了解一下HTML表格的基本结构。一个表格由`&lt;table...

    table添加、删减行,单元格添加、修改、删除标记,对于指定标记默认生成显示,浮动定位且不会产生水平导航条

    首先,让我们详细了解一下如何使用jQuery添加和删除表格行。在HTML中,表格由`&lt;table&gt;`标签定义,行由`&lt;tr&gt;`标签表示,而单元格则由`&lt;td&gt;`或`&lt;th&gt;`(表头单元格)标签构成。在jQuery中,可以使用`.append()`方法向...

    table动态添加行

    4. **事件绑定**:对于删除行功能,通常我们会将删除操作绑定到行的右键菜单或行的特定图标上,这需要使用`addEventListener`为每个行添加事件监听器。 这样,我们就实现了基本的`HTML`表格动态添加和删除行的功能...

    asp.net table控件自动添加删除行功能代码

    总之,ASP.NET Table控件的自动添加和删除行功能主要依赖于后台代码来处理,通过创建和操作TableRow和TableCell对象,以及利用Table控件的Rows集合。理解这些基础概念和方法,能帮助你更好地构建具有动态交互功能的...

    javascript对table的添加,删除行的操作

    在JavaScript中,对HTML表格(`&lt;table&gt;`元素)进行添加和删除行的操作是常见的前端开发任务,尤其在动态展示数据或用户交互场景下。这篇博文主要探讨如何使用JavaScript实现这些功能。 首先,我们需要理解HTML表格...

    JS example:点击按钮table增加一行,删除一行

    这篇博客“JS example:点击按钮table增加一行,删除一行”提供了具体的示例,帮助开发者掌握这一技能。 首先,让我们理解基本概念。HTML表格由`&lt;table&gt;`元素定义,`&lt;tr&gt;`元素表示表格行,`&lt;td&gt;`元素表示单元格,而...

Global site tag (gtag.js) - Google Analytics