JQUERY方法给TABLE动态增加行

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JQUERY方法给TABLE动态增加行相关的知识,希望对你有一定的参考价值。

参考技术A

1、首先输入下方的代码:

<%@ page language="java" pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>利用jquery给指定的table添加一行、删除一行</title>

<meta http-equiv="pragma" content="no-cache">

<meta http-equiv="cache-control" content="no-cache">

<meta http-equiv="expires" content="0">

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

<meta http-equiv="description" content="This is my page">

<script type="text/javascript"

src="<%=request.getContextPath()%>/js/jquery-1.5.1.js"></script>

<script type="text/javascript">

2、然后在输入下方的代码:

////////添加一行、删除一行封装方法///////

/**

* 为table指定行添加一行

*

* tab 表id

* row 行数,如:0->第一行 1->第二行 -2->倒数第二行 -1->最后一行

* trHtml 添加行的html代码

*

*/

function addTr(tab, row, trHtml)

//获取table最后一行 $("#tab tr:last")

//获取table第一行 $("#tab tr").eq(0)

//获取table倒数第二行 $("#tab tr").eq(-2)

var $tr=$("#"+tab+" tr").eq(row);

if($tr.size()==0)

alert("指定的table id或行数不存在!");

return;

$tr.after(trHtml);

3、然后在输入下方的代码:

function delTr(ckb)

//获取选中的复选框,然后循环遍历删除

var ckbs=$("input[name="+ckb+"]:checked");

if(ckbs.size()==0)

alert("要删除指定行,需选中要删除的行!");

return;

ckbs.each(function()

$(this).parent().parent().remove();

);

/**

* 全选

*

* allCkb 全选复选框的id

* items 复选框的name

*/

function allCheck(allCkb, items)

$("#"+allCkb).click(function()

$('[name='+items+']:checkbox').attr("checked", this.checked );

);

////////添加一行、删除一行测试方法///////

$(function()

//全选

allCheck("allCkb", "ckb");

);

function addTr2(tab, row)

var trHtml="<tr align='center'><td width='30%'><input type='checkbox' name='ckb'/>

</td><td width='30%'>地理</td><td width='30%'>60</td></tr>";

addTr(tab, row, trHtml);

function delTr2()

delTr('ckb');

4、然后输入下方的代码:

</script>

</head>

<body>

<table border="1px #ooo" id="tab" cellpadding="0"

cellspacing="0" width="30%">

<tr align="center">

<td width="30%"><input id="allCkb" type="checkbox"/></td>

<td width="30%">科目</td>

<td width="30%">成绩</td>

</tr>

<tr align="center">

<td width="30%"></td>

<td width="30%">语文</td>

<td width="30%">80</td>

</tr>

</table>

<input type="button" onclick="addTr2('tab', -1)" value="添加">

<input type="button" onclick="delTr2()" value="删除">

</body>

</html>

5、然后这样就完成了。

jquery 动态增加删除行

最近写程序,碰巧有动态增加删除行,下面就记录一下

 

html就不写了,也没有什么,直接上核心了

新增行

技术图片
function addRow(obj)
  //获得table一共有多少行,方便追加的时候给序号赋值 var length = $("#grid tr").length;
  //获得当前是第几行,以便追加的时候,在该行下进行新增,我这里跨的级别比较多,根据实际层级去定义 var current = $(obj).parent().parent().parent().prevAll().length; // alert(current);
  //这里主要定义需要追加的内容,当然要从tr开始,很简单,大家都会的 var addContent = "";
  //核心方法,gird是table的id,current是在第几行后插入,addContent就是要追加的内容了 addTr(‘grid‘,current,addContent);
  //这里是重新排序,将序号从1到n重新排序,碰巧我的代码里第一个tr是不显示的,所以就不+1了 $("#grid tr").each(function(index) if(index != 0) $(this).children(‘td‘).eq(0).text(index); );
技术图片

好,下面我们看下addTr方法~~这个是在网上找到的,还是蛮好用的

技术图片
/**
 * 为table指定行添加一行
 *
 * tab 表id
 * row 行数,如:0->第一行 1->第二行 -2->倒数第二行 -1->最后一行
 * trHtml 添加行的html代码
 *
 */
function addTr(tab, row, trHtml)
    //获取table最后一行 $("#tab tr:last")
    //获取table第一行 $("#tab tr").eq(0)
    //获取table倒数第二行 $("#tab tr").eq(-2)
    var $tr=$("#"+tab+" tr").eq(row);
    if($tr.size()==0)
       alert("指定的table id或行数不存在!");
       return;
    
    $tr.after(trHtml);
 
技术图片

删除行,这个就比较简单了

技术图片
function deleteRow(obj)
  //移除 $(obj).parent().parent().parent().remove();
  //重新排序,如果删除的不是最后一行,不重新排序就不能看了~ $("#grid tr").each(function(index) if(index != 0) $(this).children(‘td‘).eq(0).text(index); );
技术图片

动态添加删除行,就这么几行代码,方便大家使用

ps:  $(this).prevAll().length + 1;//列

以上是关于JQUERY方法给TABLE动态增加行的主要内容,如果未能解决你的问题,请参考以下文章

jquery 动态增加删除行

jquery 动态增加删除行

jquery里怎么用clone给表格增加一行

jquery如何给指定的表格增加行,然后给每行插入数据,而且其中一行能有超链接的。

jQuery实现表格行的动态增加与删除(改进版)

利用jquery.ajax在jsp页面动态生成table,可以增加修改,并支持一行和多行删除