jQuery列表检索功能实现代码,jQuery实现列表的全选功能

先给大家体现下效果图:

其一课程将报告您怎么样使用jQuery增多一连的CSS类生成贰个生动的列表。第2个示范是如何利用jQuery的prepend性子为留言列表增加多个留言计数。
能够先看看示例。
1a.添加jQuery代码
下载jQuery,在<head>标签之间如下加多jQuery代码:

jQuery完毕列表的全选功用

 本文给大家大快朵颐的是行使jquery完毕的全选删除插件的代码,非常的实用,本文示例是构成的ThinkPHP,小同伴们方可Infiniti制扩充。

 

 

只需求几行代码就足以兑现列表的全选功效,何况能够包容post央浼推行后台的删除程序

js

 

代码如下:

function DelAlert(data)
{
if(data == ‘error’)
{
alert(“错误~”);
}
else if(data == ‘success’)
{
alert(“成功~”);
location.reload();
}
}
//引进jquery,这里后台协作的是thinkphp
$(function(){
//每行的checkbox须要有check-value属性来寄存当前行的id
//选中全部,checkAll 为选中全体的checkbox的id selctone
为每一行checkbox的class
$(‘#checkAll’).selectall(‘selectone’);
//删除选中,deleteAll为除去全数按键的id selectone
为每一行checkbox的class 后台接受参数ids 格式如: 1,2,3
var url = “Home/Role/delall'”;
$(‘#deleteAll’).delselect(‘selectone’,url,function(data){
DelAlert(data);
},function(){
layer.msg(“没有当选内容”,2,0);
jQuery列表检索功能实现代码,jQuery实现列表的全选功能。});
})

 

jquery.selectall.js

 

代码如下:

(function( $ ){
$.fn.selectall = function(className) {
$(this).bind(‘click’,function()
{
if($(this).attr(‘checked’) == ‘checked’)
{
$(this).attr(“checked”,false)
$(‘.’+className).attr(‘checked’,false);
}else{
$(this).attr(‘checked’,’checked’);
$(‘.’+className).attr(‘checked’,’checked’);
}
});
$(‘.’+className).bind(‘click’,function()
{
if($(this).attr(‘checked’) == ‘checked’)
{
$(this).attr(“checked”,false);
}else{
$(this).attr(‘checked’,’checked’);
}
});
};
$.fn.delselect = function(className,url,fun,unselectfun){
$(this).bind(‘click’,function(){
var selectid = ”;
$(“.”+className).each(function(){
if($(this).attr(‘checked’)==’checked’){
selectid+=$(this).attr(‘check-value’)+’,’;
}
});
if(selectid)
{
selectid = selectid.substring(0,selectid.length-1);
$.post(url,{ids:selectid},function(data){
fun(data);
});
}else
{
unselectfun();
}
});
};
})( jQuery );

 

如上所述就是本文的全部内容了,希望咱们能够喜欢。

本文给我们享受的是采纳jquery完结的全选删除插件的代码,特别的实用,本文示例是构成的ThinkPHP,小友人们方可自…

以此科目将告诉你哪些利用jQuery增多延续的CSS类生成三个声泪俱下的列表。首个示范是什么行使jQuery的prepend性情为留言列表添加二个留言计数。
可以先看看示例。
1a.添加jQuery代码
下载jQuery,在<head>标签之间如下加多jQuery代码:

图片 1 

复制代码 代码如下:

有关文章

连锁寻觅:

昨日看啥

探寻技巧库

回到首页

  • php数组随机排序达成形式
  • IDisposable接口
  • Java与微信不得不说的轶事——达成微信民众
  • 【python学习笔记01】python的数据类型,python学
  • SVG绘图(二) ——
    渲染满天星辰,svg满天
  • 听新闻说jQuery图片成分网格布局插件,jquery网格布

有关频道:
HTML/CSS  HTML5  Javascript  jQuery  AJax教程  前面一个代码  正则表达式  Flex教程  WEB前端教程  

复制代码 代码如下:

那是贰个总结的列表 右上角有二个物色成效 我们要贯彻的是列表检索功用是用的jquery实现的 具体代码如下

<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(“#step li”).each(function (i) {
i = i+1;
$(this).addClass(“item” i);
});
});
</script>

帮客争辩

<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(“#step li”).each(function (i) {
i = i+1;
$(this).addClass(“item” i);
});
});
</script>

$(function(){
      $("input[type=button]").click(function(){
        var txt=$("input[type=text]").val();
        if($.trim(txt)!=""){
          $(".ggsm_list li span").parent().hide().filter(":contains('"+txt+"')").show();
        }else{
          $(".ggsm_list li").show();
        }
      });
    });

jQuery将如下输出html源码:
图片 2 
1b.CSS编码
对应的选拔背景图片样式化<li>元素。(step1.png, step2.png,
step3.png等等)。

jQuery将如下输出html源码:
图片 3 
1b.CSS编码
对应的运用背景图片样式化<li>成分。(step1.png, step2.png,
step3.png等等)。

给开关一个点击事件,首先取获得input中的值,然后让span的另外父成分都藏匿(其实正是藏身掉另外的li标签)然后寻觅含有txt(正是input中值)的那多少个li,然后展现出来

复制代码 代码如下:

复制代码 代码如下:

相关文章