正文

jquery实现table动态添加行删除行以及行的上移和下移

xiaogou  xiaogou  2023-05-08  244

关键词：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title></title>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
$(function($) 
    //元素交换  
    $(".up").live(‘click‘,function()  
        $(this).parent().parent().prev("tr").before($(this).parent().parent());  
    );  
    $(".down").live(‘click‘,function()  
        $(this).parent().parent().next("tr").after($(this).parent().parent());  
    );  
      
    $(".delete").live(‘click‘,function()  
        $(this).parent().parent().remove();  
    );  
      
    $(".add").live(‘click‘,function()  
        var i= $("#tr_count").val();
        $(‘<tr id="‘+(i++)+‘"><td>‘+(i)+‘</td><td><input type ="button" value="上" class="up"/><input type ="button" value="下" class="down"/><input type ="button" value="删" class="delete"/><input type ="button" value="加" class="add"/></td></tr>‘)  
        .insertAfter($(this).parent().parent());  
        $("#tr_count").val(i);

    );  




); 
</script>


</head>
<body>

<input type="hidden" value="1" id="tr_count">
<table width="100" height="100" id="table" border="1">  
    <tr id="1">  
        <td>1</td><td>  
        <input class="up" type="button" value="上">  
        <input class="down" type="button" value="下">  
        <input class="delete" type="button" value="删">  
        <input class="add" type="button" value="加">  
        </td>  
    </tr>  
</table> 

</body>
</html>

js实现表格table动态添加删除行

1、页面内容　　　　　　<tablestyle="border:1px;width:100%;height:160px"> <THEAD> 查看详情

js实现动态添加删除table行示例

<tablecellpadding="0"cellspacing="0"border="1"style="margin:auto;width:96%;"id="LearnInfoItem"><tr><tdcolspan="8"bgcolor="#96E0E2"style="height:30px;"><h3style="text-align:center; 查看详情

asp.net实现动态添加table行

asp.net动态的生成，删除table的行,主要是在后台动态创建单元行，单元表格，效果图：2.代码：<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="releaseAffair.aspx.cs"Inherits="affair_releaseAffair"%><!DOCTYPEhtml><!--发布事务页面：名称查看详情

使用jquery添加/删除后的动态行编号

】使用jquery添加/删除后的动态行编号【英文标题】：dynamicrownumberingafteradd/deleteusingjquery【发布时间】：2021-07-1914:49:06【问题描述】：我正在尝试使用jquery添加/删除后实现动态行编号设置。下面是我的php代码，我可以实现添加行... 查看详情

jquery实现表格行的动态增加与删除序号从1开始排列

<tableid="tab"border="1"width="60%"align="center"style="margin-top:20px"><tr><tdwidth="20%">序</td><td>标题</td><td>描述</td><td>操作</td></tr&g 查看详情

如何跟踪视图行的 ArrayList 的动态索引

】如何跟踪视图行的ArrayList的动态索引【英文标题】：HowtokeeptrackofdynamicindicesofArrayListofviewrows【发布时间】：2018-04-2209:33:55【问题描述】：我正在动态添加/删除行，每一行都有几个按钮，包括一个删除行的按钮。每一行代表一... 查看详情

用于在 HTML 表格行之间添加行的 Jquery 语法

】用于在HTML表格行之间添加行的Jquery语法【英文标题】：JquerysyntaxforaddingrowsinbetweenHTMLtablerows【发布时间】：2012-02-1719:18:24【问题描述】：在现有HTML表格行之间添加行的jQuery语法是什么？<Tableid="TEST"><tr>1</tr><tr>... 查看详情

如何jquery实现表格数据的动态添加与统计

参考技术A比如设置table的id为tabvartrHTML="..."$("#tab").append(trHTML);//在table最后面添加一行$("#tabtr:eq(2)").after(trHTML);//在table的第3行后面添加一行这样就可以进行动态的添加行了，至于你是通过什么事件来动态添... 查看详情

Html 使用 javascript 动态添加和删除行

】Html使用javascript动态添加和删除行【英文标题】：Htmladdanddeleterowsdynamicallywithjavascript【发布时间】：2021-08-2822:55:18【问题描述】：我希望有一个最初没有行的表，然后动态创建每一行并能够删除每一行。我得到无法读取未定义... 查看详情

将节标题添加到uitableview后删除行的问题

...够使用commitEditingStyle函数删除行而没有任何问题。我决定实现部分标题，以便用户更轻松地查看按日期添加到表中的项目。此功能工作正常查看详情

在多个部分中动态添加和删除行

】在多个部分中动态添加和删除行【英文标题】：Addanddeleterowsdynamicallyinmultiplesections【发布时间】：2012-06-0201:32:11【问题描述】：我已经搜索和搜索，但我似乎无法找到我的问题的答案。我有一个包含3行的动态表格视图（每行... 查看详情

Html表使用javascript动态添加和删除行[关闭]

】Html表使用javascript动态添加和删除行[关闭]【英文标题】：Htmltableaddanddeleterowsdynamicallywithjavascript[closed]【发布时间】：2021-08-2818:52:22【问题描述】：我希望有一个最初没有行的表，然后动态创建每一行并能够删除每一行。我得... 查看详情

c#动态增加行删除行

原来有一行：点击添加，在下面增加同样的一行新增加的行有一列删除按钮，点击某行的删除按钮时，删除当前行方法：哈哈，我果然好聪明啊1、文本框、文本框、添加按钮2、一个DataGridView（放一个panel里）... 查看详情

纯前端实现—表格的行添加和删除(代码片段)

实现效果：表格行的添加和删除源码：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>表格行的添加及删除</title><style>inputwidth:200p 查看详情

jquery实现表格的增加行和删除行

利用JQuery实现datatables插件的增加和删除行操作在学习过程中遇到了这个利用JQuery对表格行的增加和删除，特记录下来以供初学者参考。下面是主要的代码：<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>zengjiahesh... 查看详情

htmltable利用js动态增加行列并且设置colspan

如题在给一个借书系统做子表时需要进行这个动态添加行的操作：主要思想：1.获取table对象2.增加行以及相应的列3.设置列的colspan以及innerHTML就是内容。functionAddTableRow(){varTable=document.getElementById("booktable");//取得自定义的表... 查看详情

js-动态为table插入删除行

CreateTime--2017年4月15日08:09:43Author:Marydonjs-动态插入、删除table行用到table的insertRow()和deleteRow()方法<inputid="userName"type="button"value="增加行"onclick="insertRow();"/><inputid="userName"type="button 查看详情

MySQL：从 MySQL TABLE 中删除重复行的最安全方法是啥？

】MySQL：从MySQLTABLE中删除重复行的最安全方法是啥？【英文标题】：MySQL:WhatisthesafestwaytoremoveduplicaterowsfromaMySQLTABLE?MySQL：从MySQLTABLE中删除重复行的最安全方法是什么？【发布时间】：2013-05-0609:08:42【问题描述】：我有一个MySQL表... 查看详情