jquery表格添加行

竭诚为您提供优质文档/双击可除

jquery表格添加行

篇一：基于jquery的实现简单的表格中增加或删除下一行

代码如下：

html代码如下:

jquery代码如下:

篇二：jquery实现动态添加和删除行

"/tR/xhtml1/dtd/xhtml1-transitiona l.dtd">

jquery表格操作添加行、删除行和动态移动

src="/html/js/jquery-1.3.2.min.js">

添加一行

删除一行

上移下移

序号

步骤名称

步骤描述

相关操作

varcurrentstep=0;

varmax_line_num=0;

functionadd_line(){

max_line_num=$("#content

tr:last-child").children("td").html(); if(max_line_num==null){

max_line_num=1;

}else{

max_line_num=parseint(max_line_num);

max_line_num+=1;

}

$(#content).append(

" +"onclick=lineclick(this);>"

+max_line_num+"打开网页"+max_line_num+"打开登录网页"+max_line_num

+"删除编辑");}

functionremove_line(){

$("#contenttr").each(function(){

varseq=parseint($(this).children("td").html());if(s eq==currentstep)

$(this).remove();

if(seq>currentstep)

$(this).children("td").each(function(i){

if(i==0)

$(this).html(seq-1);

});});currentstep=0;}functionup_exchange_line() {if(currentstep==0){alert(请选择一

项!);returnfalse;}if(currentstep

$(#line+currentstep).html();$(#line+upstep).html(cu rrentcontent);//交换当前行与上一行内容

$(#line+currentstep).html(upcontent);$(#contenttr). each(function(){$(this).css("background-color","#ff ffff");});$(#line+upstep).css("background-color","y ellow");currentstep=upstep;}functiondown_exchange_l ine(){if(currentstep==0){alert(请选择一

项!);returnfalse;}if(currentstep>=max_line_num){ale rt(非法操

作!);returnfalse;}varnextstep=parseint(currentstep) +1;//修改序号

$(#line+nextstep+"td:first-child").html(currentstep );$(#line+currentstep+"td:first-child").html(nextst ep);//取得两行的内容

varnextcontent=$(#line+nextstep).html();varcurrentc ontent=$(#line+currentstep).html();$(#line+nextstep ).html(currentcontent);//交换当前行与上一行内容$(#line+currentstep).html(nextcontent);$(#contenttr ).each(function(){$(this).css("background-color","# ffffff");});$(#line+nextstep).css("background-color ","yellow");currentstep=nextstep;}functionlineclick (line){

$(#contenttr).each(function(){

$(this).css("background-color","#ffffff");});