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

<table id="tab" border="1" width="60%" align="center" style="margin-top:20px">
<tr>
<td width="20%">序</td>
<td >标题</td>
<td >描述</td>
<td >操作</td>
</tr>
</table>
<div style="border:2px;
border-color:#00CC00;
margin-left:20%;
margin-top:20px">
<input type="button" id="but" value="增加" />

</div>
<script>
$(document).ready(function () {
$("#tab tr").attr("align", "center");
$("#but").click(function () {
var _len = $("#tab tr").length;
$("#tab").append("<tr id=" + _len + " align=‘center‘>"
+ "<td>" + _len + "</td>"
+ "<td>Dynamic TR" + _len + "</td>"
+ "<td><input type=‘text‘ name=‘desc" + _len + "‘ id=‘desc" + _len + "‘ /></td>"
+ "<td><a href=\‘#\‘ onclick=\‘deltr(" + _len + ")\‘>删除</a></td>"
+ "</tr>");
})
})
//删除<tr/>
var deltr = function (index) {
var _len = $("#tab tr").length;
$("tr[id=‘" + index + "‘]").remove();//删除当前行
for (var i = index + 1, j = _len; i < j; i++) {
var nextTxtVal = $("#desc" + i).val();
$("tr[id=\‘" + i + "\‘]")
.replaceWith("<tr id=" + (i - 1) + " align=‘center‘>"
+ "<td>" + (i - 1) + "</td>"
+ "<td>Dynamic TR" + (i - 1) + "</td>"
+ "<td><input type=‘text‘ name=‘desc" + (i - 1) + "‘ value=‘" + nextTxtVal + "‘ id=‘desc" + (i - 1) + "‘/></td>"
+ "<td><a href=\‘#\‘ onclick=\‘deltr(" + (i - 1) + ")\‘>删除</a></td>"
+ "</tr>");
}

}
</script>

时间: 2024-10-18 18:25:15

jQuery实现表格行的动态增加与删除 序号 从 1开始排列的相关文章

jQuery实现表格行的动态增加与删除

删除之前删除2行后: 1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2<html xmlns="http://www.w3.org/1999/xhtml"> 3<head> 4<meta http-equiv

jquery动态增加或删除tr和td【实际项目】

难点: (1)动态增加.删除tr和td (2)每天tr和td都有下标,且下标要动态变化, (3)tr和td为什么下标不能随便写,原因是此处需要把所有tr中的数据以list的形式发送到后台对象中,所有每天tr中的tr中name='对象[index].属性',必须有下标且下标要从0开始且要连续不能跳跃 (4)增加tr和td需要学习细节有: 创建td   var $tdName = $("<td class='in-ctt'></td>"); td添加内容   $td

js实现表格行的动态添加------Day56

现代页面通常都是用div+css来进行设计,几乎很少再有用table来进行布局的了,但是这并不意味着table的重要性就降低了,事实上,table在数据处理上有着它独特的优势,所以对table的掌握还是很有必要的. 我们首先要记录的问题是:js动态的添加表格的行和列 我们先给定一个table,先用html语言编写下: <table width="100%" height="300px" border="1px" id="tad&q

jquery更改表格行顺序实例

使用jquery写的更改表格行顺序的小功能表格部分: 复制代码代码如下: <table class="table" id="test_table">  < thead> < tr>  < th>时间</th> < th>详情</th>  < th>操作</th> < /tr>  < /thead> < tbody> <

开机状态下,动态增加与删除SCSI磁盘

开机状态下,SCSI磁盘动态增加与删除命令如下,已经在虚拟机opensuse15.1与物理机centos7.3上测试通过. 删除磁盘命令: echo 1 > /sys/block/sda/device/delete    //sda可以是任何SCSI设备 增加磁盘命令: echo "- - -">/sys/class/scsi_host/host0/scan   //其中host0为磁盘所在的adapter名称 原文地址:https://www.cnblogs.com/lo

JQuery实现表格行的上移、下移、删除、增加

<%@ page language="java" import="java.util.*" pageEncoding="GBK"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getSer

hdfs以及hbase动态增加和删除节点

一个知乎上的问题:Hbase的Region server和hadoop的datanode是否可以部署在一台服务器上?如果是的话,二者是否是一对一的关系?部署在同一台服务器上,可以减少数据跨网络传输的流量. 但不是一对一对的关系,首先,数据还hdfs中保存N份,默认是三分,也就是说数据会分布在三个datanode上,即使regionserver上只保存一个region,它也可以与三个datanode交互,更何况,一台regionserver可以保存多个region. 参考:https://www.

动态增加,删除表格行并按照表格列排序

接着上一篇博文,解决上一篇博文最后遗留的瑕疵,同时,给表格列添加了排序功能. 解决掉的问题 1 乱码的问题 2 删除方法更加简便,省去获取父节点id的代码 3 点击第一行的add按钮后,下行table行变宽问题 <html> <head> <title>Table</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"&g

jquery为表格行添加上下移动画效果

为项目列表项添加上下移动动画.首先想使用jquery animate来做到这一点.但我用的是table和tr作为列表和列表项,但jquery动画方法不支持table里的tr(Animations are not supported on table rows.).所以设法用其他解决方案.最后使用jq方法配合 CSS3 transform 实现. /** * @param {Object} $fstElem 目标行 * @param {Object} $scdElem 被换行 * @param {