jquery特效动态行（如何通过jquery动态给表格添加一行）

本文目录

如何通过jquery动态给表格添加一行
jQuery实现列表内容的动态载入特效
jquery中的animate动态效果是如何通过Js实现的
JQuery表格插入行滑动特效
用jquery动态添加行，同时合并单元格，怎样实现
用jQuery动画来做特效，怎么防止多次点击动画重复的问题
如何让jquery动画效果在屏幕滚动到指定位置才执行
jquery是什么在网站中有什么作用
Jquery 的clone方法动态增加行，事件问题

如何通过jquery动态给表格添加一行

比如设置table的id为tab
var trHTML = “《tr》《td》...《/td》《/tr》“
$(“#tab“).append(trHTML);//在table最后面添加一行
$(“#tab tr:eq(2)“).after(trHTML); // 在table的第3行后面添加一行这样就可以进行动态的添加行了，至于你是通过什么事件来动态添加那就看你自己的意思了，通过button或者div之类的点击事件添加，只要把上面的两行代码放进去就ok，注意，要把var trHTML那行代码放进添加事件里面，不然不管点击多少下，都只能添加一行
$(function() {
$(“:button“).click(function() {
var tr = “《tr》《td》new《/td》《/tr》“;
//$(“table“).append(tr);
$(“table tr:eq(2)“).after(tr);
});
});

这是我测试用的代码，你可以运行看看

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的模块可以分为：入口模块、底层支持模块和功能模块。其核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

采用Jquery实现的列表数据动态更新效果，更新的数据可以是ajax请求的数据。CSS:.main{width:100%;margin-top:100px;text-align:center;font-size:12.5px;}th,td{border:1pxsolid#ccc;line-height:40px;padding-left:5px;}.item:hover{background-color:#efefef;}.item:nth-child(2n){background-color:#efefef;}.ListView{width:600px;overflow:hidden;margin:0auto;padding:10px;height:372px;border:1pxsolid#dddddd;}.ListView.c{width:1200px;margin:0auto;border-collapse:collapse;}.Item{border-bottom:1pxdashed#dddddd;padding:10px010px0;overflow:hidden;margin-left:600px;}.Itemspan{float:left;text-align:left;}.Itemspan:first-child{color:#6AA8E8;}.Itemspan:last-child{text-align:center;}HTML《divclass=“main“》《divclass=“ListView“》《divclass=“c“》《divclass=“Item“》《span》test《/span》《span》男/0《/span》《span》四川省，成都市，锦江区《/span》《span》详细说明《/span》《/div》《divclass=“Item“》《span》test《/span》《span》男/0《/span》《span》四川省，成都市，锦江区《/span》《span》详细说明《/span》《/div》《divclass=“Item“》《span》test《/span》《span》男/0《/span》《span》四川省，成都市，锦江区《/span》《span》详细说明《/span》《/div》《divclass=“Item“》《span》test《/span》《span》男/0《/span》《span》四川省，成都市，锦江区《/span》《span》详细说明《/span》《/div》《divclass=“Item“》《span》test《/span》《span》男/0《/span》《span》四川省，成都市，锦江区《/span》《span》详细说明《/span》《/div》《divclass=“Item“》《span》test《/span》《span》男/0《/span》《span》四川省，成都市，锦江区《/span》《span》详细说明《/span》《/div》《divclass=“Item“》《span》test《/span》《span》男/0《/span》《span》四川省，成都市，锦江区《/span》《span》详细说明《/span》《/div》《divclass=“Item“》《span》test《/span》《span》男/0《/span》《span》四川省，成都市，锦江区《/span》《span》详细说明《/span》《/div》《divclass=“Item“》《span》test《/span》《span》男/0《/span》《span》四川省，成都市，锦江区《/span》《span》详细说明《/span》《/div》《divclass=“Item“》《span》test《/span》《span》男/0《/span》《span》四川省，成都市，锦江区《/span》《span》详细说明《/span》《/div》《/div》《/div》《/div》《pstyle=“text-align:center;“》《ahref=“javascript:void(0);“onClick=“ListView.Update();“》刷新数据《/a》《/p》JS《scripttype=“text/javascript“src=“/js/jquery-1.8.0.min.js“》《/script》《scripttype=“text/javascript“》$(function(){ListView.Init();});varListView={Init:function(){$(“.Itemspan“).css(“width“,$(“.ListView“).width()/4+“px“);for(vari=0;i《$(“.Item“).length;i++){vartarget=$(“.Item“);$(target).animate({marginLeft:“0px“},300+i*100);}},Update:function(){$(“.ListView.c.Item“).remove();for(vari=0;i《10;i++){varnewItem=$(“《divclass=\“Item\“》《span》test《/span》《span》男/“+i+“《/span》《span》四川省，成都市，锦江区《/span》《span》详细说明《/span》《/div》“);$(newItem).find(“span“).css(“width“,$(“.ListView“).width()/4+“px“);$(“.ListView.c“).append(newItem);$(newItem).animate({marginLeft:“0px“},300+i*100);}}}《/script》附上演示效果

jquery中的animate动态效果是如何通过Js实现的

你可以看下jquery的源代码，animate: function( prop, speed, easing, callback ) { var empty = jQuery.isEmptyObject( prop ), optall = jQuery.speed( speed, easing, callback ), doAnimation = function() { // Operate on a copy of prop so per-property easing won’t be lost var anim = Animation( this, jQuery.extend( {}, prop ), optall ); // Empty animations, or finishing resolves immediately if ( empty || jQuery._data( this, “finish“ ) ) { anim.stop( true ); } }; doAnimation.finish = doAnimation; return empty || optall.queue === false ? this.each( doAnimation ) : this.queue( optall.queue, doAnimation ); }jQuery.speed = function( speed, easing, fn ) { var opt = speed && typeof speed === “object“ ? jQuery.extend( {}, speed ) : { complete: fn || !fn && easing || jQuery.isFunction( speed ) && speed, duration: speed, easing: fn && easing || easing && !jQuery.isFunction( easing ) && easing }; opt.duration = jQuery.fx.off ? 0 : typeof opt.duration === “number“ ? opt.duration : opt.duration in jQuery.fx.speeds ? jQuery.fx.speeds : jQuery.fx.speeds._default; // normalize opt.queue - true/undefined/null -》 “fx“ if ( opt.queue == null || opt.queue === true ) { opt.queue = “fx“; } // Queueing opt.old = opt.complete; opt.complete = function() { if ( jQuery.isFunction( opt.old ) ) { opt.old.call( this ); } if ( opt.queue ) { jQuery.dequeue( this, opt.queue ); } }; return opt;}

JQuery表格插入行滑动特效

估计你是在行（TR）上使用的 slideToggle 吧，TR本身是没有高度的，因此JQuery在收缩过程中修改其高度后并没呈现出效果。

你在对TD进行 slideToggle 就可以了。

PS：

如果文本直接放在TD中，当TD高度缩小到文字高度时会出现卡顿。

解决办法：

在TD中添加DIV，在DIV中放入文本，

DIV样式如下：

$(“#myTable tbody tr td div“).css({ overflow : “hidden“, height : “24px“ });

JS语句：

$(“#myTable tbody tr:gt(2) td,#myTable tbody tr:gt(2) td div“).slideToggle();

用jquery动态添加行，同时合并单元格，怎样实现

如下所示：////在table的第二行的位置添加一行： var tbl_elm = $(“#dgList“);$(’《tr》《td colspan=\’2\’》xxxxxx《/td》《/tr》’).insertBefore($(“TR“, tbl_elm).eq(1))////table中指定行第N列合并单元格(合并后会多出一列，删除N+1单元格即可)var tds = $(“#dgList .TableHeader1“).find(’td’);tds.setAttribute(“colSpan“, “2“);还可以写成：tds.attr(“rowSpan“, 2);这种格式$(“#dgList“).find(“tr“).eq(0).find(“td“).eq(7).remove();////juqery 读取table第N行第M列 $(“#dgList“).find(“tr“).eq(N).find(“td“).eq(M);////合并一行中除个别单元格之外的所有单元格 $(“#dgList tr:eq(0) td“).each(function () { if ($(this).text() != ’租赁资源’ && $(this).text() != ’用地规范’) { $(this).attr(“rowspan“, “2“); }});////指定行插入指定行后面$(’《tr》《td》租赁资源《/td》《td》用地规范《/td》《/tr》’).insertAfter($(“#dgList tr:eq(0)“));

用jQuery动画来做特效，怎么防止多次点击动画重复的问题

1、在你的点击事件中加上一个判断，假设产生动画效果目标的是#aa这个节点，那么你要加上这个判断if(!$(“#aa“).is(“:animated“)){ //执行你的操作}他会确保你的动画只会在上一个动画结束后才能产生，可以保持动画的完整性，但是连续点击时会有反映迟钝的感觉2、$(“#aa“).stop(true,false).animate({...},1000);这个则是会强制你的上一动画立即结束并到达动画执行结束时状态同时来运行下一次动画，会造成动画脱节不太美观，但是反应迅速说到这里我们解释下stop（）这个函数的用法。stop 是jQuery中用于控制页面动画效果的方法。运行之后立刻结束当前页面上的动画效果。stop在新版jQuery中添加了2个参数：第一个参数的意思是是否清空动画序列，也就是stop的是当前元素的动画效果还是停止后面附带的所有动画效果，一般为false，跳过当前动画效果，执行下一个动画效果；第二个参数是是否将当前动画效果执行到最后，意思就是停止当前动画的时候动画效果刚刚执行了一般，这个时候想要的是动画执行之后的效果，那么这个参数就为true。否则动画效果就会停在stop执行的时候3、第三种方法应用就需要设置一个判断是否处于动画的标志，一般是一个点击事件执行N多个步骤的动画之后然后跳到下一个动画。var flag = false;function aa(){if(flag) return;//这里指当这个标志flag为真的时候，直接返回，不执行当前的这个动画。flag=true;//这里是在执行这个动画的最开始的时候把标志flag设置为真，在这个动画没执行完之前这个值一直为真，当下次运行这个函数的时候，由于flag值为真，也不会执行。必须等到这个函数执行完之后才会再次执行这个动画。……………….………………..………………..$(“#aa”).animated({“left”:”100″},1000,function(){………………….flag=false;//回到最初始状态，也是也表示这一轮动画执行完毕。});}

如何让jquery动画效果在屏幕滚动到指定位置才执行

1、新建一个html文件，命名为test.html。

2、在test.html文件内，使用div标签创建一个模块，并设置其id为mycss。

3、在css标签内，定义div的样式，设置其宽度为100px，高度为2000px，背景颜色为粉红色。

4、在js标签内，使用scroll()方法监听页面的滚动条，并执行function方法。

5、在function方法内，使用if语句判断，当前滚动的位置（scrollTop()）是否到达页面的底部（$(document).height()-$(window).height()），如果到达页面底部，提示“已经到底部了”。

jquery是什么在网站中有什么作用

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。

jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。所以在网站设计中使用jQuery可以写更少的代码实现更多的功能。而且它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

扩展资料：

jQuery的语言特点：

1、快速获取文档元素

jQuery的选择机制构建于Css的选择器，它提供了快速查询DOM文档中元素的能力，而且大大强化了JavaScript中获取页面元素的方式。

2、提供漂亮的页面动态效果

jQuery中内置了一系列的动画效果，可以开发出非常漂亮的网页，许多网站都使用jQuery的内置的效果，比如淡入淡出、元素移除等动态特效。

3、创建AJAX无刷新网页

AJAX是异步的JavaScript和XML的简称，可以开发出非常灵敏无刷新的网页，特别是开发服务器端网页时，比如PHP网站，需要往返地与服务器通信，如果不使用AJAX，每次数据更新不得不重新刷新网页，而使用AJAX特效后，可以对页面进行局部刷新，提供动态的效果。

参考资料：百度百科——jQuery

Jquery 的clone方法动态增加行，事件问题

jquery clone方法实现动态增加行和删除行//待克隆的div《div class=“serviceList-sel-body“》《div id=“serviceId0“ name=“divName“ 》《select id=“service_select_id“ name=“serviceId“ class=“serviceSelect“ style=“width: 100px;“》《/select》《input id=“serviceRateId“ name=“serviceRate“ class=“serviceRate“ onblur=“javascript:checkServiceRate(this);“name=““maxlength=“5“ style=“width: 60px;“/》% 《input id=“divideRateId“ name=“divideRate“ class=“divideRate“ onblur=“javascript:checkDivideRate(this);“ name=““ maxlength=“5“ style=“width: 60px;“/》% 《a href=“#“ id=“delA“ onclick=“return false;“ title=“删除“ class=“delRow_Link“ 》《/a》《/div》 js代码//动态添加行 function addRow(service_id,service_rate,divide_rate,flag){ var idNum;//计数标识 var row1; row1=$(“#serviceId“+(idNum-1));//获得第一行 -----修改(显示) -- 设置jquery对象(待克隆的div) //如果row1为空 if(row1.length==0){ idNum=1; row1=$(“#serviceId“+(idNum-1)); } var newRow=row1.clone(true);//创建第一行的一个副本 // newRow.insertBefore(row1);//在第一行前插入 newRow.insertAfter(row1);//在第一行后插入 var rndID=“serviceId“+idNum; newRow.attr(“id“,rndID);//设置行ID 每次都不一样 //给各个 select input 加上不同的id newRow.find(“a“).attr(“id“,rndID); newRow.find(“select.serviceSelect“).attr(“id“,“serviceSelect“+rndID); newRow.find(“input.serviceRate“).attr(“id“,“serviceRate“+rndID); newRow.find(“input.divideRate“).attr(“id“,“divideRate“+rndID); //初始值为空 $(“#serviceRate“+rndID).val(““); $(“#divideRate“+rndID).val(““); //绑定事件 newRow.find(“input.divideRate“).blur(function(){ checkDivideRate(this); }); newRow.find(“input.serviceRate“).blur(function(){ checkServiceRate(this); }); //给新增的每一行内的删除加上删除事件 newRow.find(“a“).click(function(){ delRow(this); }); // 新加行显示删除按键 newRow.find(“a“).html(“ 《span style=’color: blue;’》删除《/span》“); //修改时候用到 if(flag==2){ newRow.find(“select.serviceSelect“).val(service_id); newRow.find(“input.serviceRate“).val(service_rate); newRow.find(“input.divideRate“).val(divide_rate); } //查看时候用到 if(flag==3){ //alert(service_id+“ | “+service_rate+“ | “+divide_rate); newRow.find(“select.serviceSelect_view“).val(service_id); newRow.find(“input.serviceRate_view“).val(service_rate); newRow.find(“input.divideRate_view“).val(divide_rate); } //显示克隆出的新行数据 newRow.show(); idNum++;//克隆一次加一次} //动态删除行function delRow(who) { $(“#“ + who.id).remove(); }

星码园

分享网站建设技术、IT技术等网络应用技术

jquery特效动态行