实现点击全部表格里面显示全部内容、点击通过表格里面只显示通过的数据 5C

图片说明能附上实例的代码

0

10个回答

在按钮上加个点击事件,再带个参数到后台,就可以了

0

使用ajax异步查询能实现

0

因为你没有给具体的使用表格技术,只能提供给你方案。全部(all)和审核通过(pass)按钮分别绑定事件,例
$("#all_btn).click(function(){
// 传入一个条件,如type=all,后台根据type筛选全部数据返回
//前端根据后台数据,重新刷新表格数据
})

            $("#pass_btn).click(function(){
                    // 传入一个条件,如type=pass,后台根据type筛选出通过审核的数据返回
                    //前端根据后台数据,重新刷新表格数据
        })
0

问后端要接口呗,用AJAX查询数据内容动态生成表单(AJAX基本上都是差不多的,改好接口和回调函数生成表单就OK拉),也可以在生成整个表单之后用静态的JS去隐藏显示,这样有个缺点就是....点击按钮获取的数据不是最新的,得刷新。

 <!-- 这是用JS控制静态页面-->
<style type="text/css">
    ul,li,tr,td,table{
        margin: 0;
        padding: 0;
        font-size: 10px;
    }
    button{
        width: 90px;
        height: 35px;
        background: #7080bb;
        color: #fff;
        margin-left: 30px;
        margin-bottom: 10px;
        border-radius: 5px;
        border: none;
    }
    .btnchack{
        background-color: #2e489e!important;
    }
    .title{
        background-color: rgba(228,228,228,1);
    }
    .color1{
        background-color: #fff;
    }
    .color2{
        background-color: rgba(247,245,246,1);
    }
    tbody td{
        float: left;
    }
    table li{
        float: left;
        list-style-type:none;
        width: 90px;
        text-align: center;
        border: 1px solid #d6d6d6;
        height: 30px;
        line-height: 30px;
    }
    table ul:after{
        content: " ";
        display: block;
        clear: both;
    }
</style>
<body>
<div>
    <button id="btn1">全部</button>
    <button id="btn2">审核通过</button>
    <button id="btn3">审核未通过</button>
</div>
<table>
    <tr>
        <td class="title">
            <ul>
            <li>序号</li>
            <li>广告位名称</li>
            <li>广告位区域</li>
            <li>价格</li>
            <li>支付方式</li>
            <li>购买时间</li>
            <li>到期时间</li>
            <li>购买商家</li>
            <li>商家电话</li>
            <li>状态</li>
            </ul>
        </td>
    </tr>
    <tr>
        <td class="content color1">
            <ul>
                <li>1</li>
                <li>品牌墙</li>
                <li>杭州,拱墅区</li>
                <li>500/月</li>
                <li>银联卡</li>
                <li>2016-06-01</li>
                <li>2016-08-01</li>
                <li>黄生xxxxx@木</li>
                <li>180xxxxxxxx89</li>
                <li class="pass">已审核通过</li>
            </ul>
        </td>
        <td class="content color2">
            <ul>
                <li>2</li>
                <li>品牌墙</li>
                <li>杭州,拱墅区</li>
                <li>500/月</li>
                <li>银联卡</li>
                <li>2016-06-01</li>
                <li>2016-08-01</li>
                <li>黄生xxxxx@木</li>
                <li>180xxxxxxxx89</li>
                <li class="pass">已审核通过</li>
            </ul>
        </td>
        <td class="content color1">
            <ul>
                <li>3</li>
                <li>品牌墙</li>
                <li>杭州,拱墅区</li>
                <li>500/月</li>
                <li>银联卡</li>
                <li>2016-06-01</li>
                <li>2016-08-01</li>
                <li>黄生xxxxx@木</li>
                <li>180xxxxxxxx89</li>
                <li class="pass">已审核通过</li>
            </ul>
        </td>
        <td class="content color2">
            <ul>
                <li>4</li>
                <li>品牌墙</li>
                <li>杭州,拱墅区</li>
                <li>500/月</li>
                <li>银联卡</li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li class="fail">未通过</li>
            </ul>
        </td>
    </tr>
</table>
</body>
<script>
    window.onload = function () {
        $('#btn1').click(function () {
            $('#btn1').addClass('btnchack');
            $('#btn2').removeClass('btnchack');
            $('#btn3').removeClass('btnchack');
            $('.content ul').css('display','block')
        });
        $('#btn2').click  (function () {
            $('#btn2').addClass('btnchack');
            $('#btn1').removeClass('btnchack');
            $('#btn3').removeClass('btnchack');
            $('.pass').parent().css('display','block');
            $('.fail').parent().css('display','none');
        });
        $('#btn3').click(function () {
            $('#btn3').addClass('btnchack');
            $('#btn1').removeClass('btnchack');
            $('#btn2').removeClass('btnchack');
            $('.pass').parent().css('display','none');
            $('.fail').parent().css('display','block');
        });
    }

    /*
    var configObj = {
       method   //数据的提交方式:get和post
       url   //数据的提交路劲
       async   //是否支持异步刷新,默认是true
       data    //需要提交的数据
       dataType   //服务器返回数据的类型,例如xml,String,Json等
       success    //请求成功后的回调函数
       error   //请求失败后的回调函数
    }

$.ajax(configObj);//通过$.ajax函数进行调用。
     */
</script>
0
fghtfght
fghtfght 这楼说的对
一年多之前 回复

全部
已通过
未通过























状态
1 已通过
2 未通过
3 已通过
4 已通过

<br> $(function(){<br> $(&quot;#all&quot;).click(function(){<br> $(&quot;.pass&quot;).show();<br> $(&quot;.npass&quot;).show();<br> });<br> $(&quot;#pass&quot;).click(function(){<br> $(&quot;.npass&quot;).hide();<br> $(&quot;.pass&quot;).show();<br> });<br> $(&quot;#npass&quot;).click(function(){<br> $(&quot;.pass&quot;).hide();<br> $(&quot;.npass&quot;).show();<br> });<br> });<br>
是这样吗?
0

图片说明

0


$(function(){
$("#all").click(function(){
$(".pass").show();
$(".npass").show();
});
$("#pass").click(function(){
$(".npass").hide();
$(".pass").show();
});
$("#npass").click(function(){
$(".pass").hide();
$(".npass").show();
});
});

0

$(function(){
$("#all").click(function(){
$(".pass").show();
$(".npass").show();
});
$("#pass").click(function(){
$(".npass").hide();
$(".pass").show();
});
$("#npass").click(function(){
$(".pass").hide();
$(".npass").show();
});
});

0

艾玛,套个vue 来个双向绑定,给个值筛选一下,so easy 。

0

$(function(){
$("#all").click(function(){
$(".pass").show();
$(".npass").show();
});
$("#pass").click(function(){
$(".npass").hide();
$(".pass").show();
});
$("#npass").click(function(){
$(".pass").hide();
$(".npass").show();
});
});

0
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
JavaScript多行文本一行显示,点击可显示单元格全部内容的Table
【引子】在开发的过程中,表格Table有个缺陷,如果一行中某个单元格的超过一行,表格就不够美观了。下面的代码解决了这个问题:当表格被载入的时候,TD的宽度是原定的长 度,不会撑开TD,也不会影响其他TD,点击某行会按照本行所有单元格中行数最多的单元格的长度伸长行高。用户体验很好。 【优点】 1、对开发人员指定的表格没有任何影响; 2、使用简单; 3、被定义的表格样式可以随意的定制你的样式,不对你的样式构成影响; 4、移植性好,扩展性好。 【缺点】 目前用IE7测试正常,但不支持FireFox,工作比较忙,没时间更正,希望网友更正,俺在此谢过。^_^ 【使用方法】 1、将AutoTableSize.js包文件[点击这儿下载源代码]导入到你的web应用目录中; 2、引入包AutoTableSize.js,页面body底部加入: <script type="text/javascript" src="AutoTableSize.js"></script> 3、编写你的脚本调用: new AutoTableSize(); 当DOM对象中只有一个Table的时候不用指定Table的ID属性; new AutoTableSize(table); table:既可以是表格的ID属性,也可以是表格对象;
easyui-dataGrid单元格显示全部内容
dataGrid基本用法 <table id="dataGridId" name="dataGridName" class="easyui-datagrid" fit="true" fitColumns="true" //单元格是否不换行(false=换行,必须有中文或者符合才会自动换行,纯英文字母不会换行) nowrap="false" //属性 data-options= //分页,可选20条每页/40条每页
td内容太多,隐藏显示部分,浮上去显示全部内容
-
JS实现显示部分文字点击显示全部
js显示隐藏层 测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语
表格溢出内容省略号显示,悬停显示全部
表格溢出内容省略号显示,悬停显示全部 本文以layui为基础添加悬浮提示框,你也可以使用自己的提示框样式或所用框架中的提示框。 html部分在这里,我随意做一个表格,宽度百分百,外层固定宽度。表格中溢出的文字以“…”表示,此时省略的文本用一个提示框显示,没有省略则不出现全部内容的提示框。(使用layui时用到jQuery,使用其他方式提示全部内容时自行增删即可)<!DOCTYPE html> <
jquery选择器(内容部分显示点击全部显示)
佳能1545 佳能1545 佳能1545 佳能1545 佳能1545 佳能1545 佳能1545 佳能1545 佳能1545 佳能1545 佳能1545 佳能1545 佳能1545 显示更多 $(function(){ var $list= $(".listbox li:gt(5)") $list.hide(); var $showmore=$
表格中内容过多时采用省略号,鼠标移上去显示全部内容
①设置省略: table td { white-space: nowrap;//规定段落中的文本不进行换行 overflow: hidden;//内容会被修剪,并且其余内容是不可见的。 text-overflow: ellipsis;//用省略号代替未显示文本 } ②设置鼠标移入显示全部内容: //js代码 var $trList = $(&quot;tbod...
HTML:table中的td文字隐藏并实现hover显示全部文字
需求: 1.table中td中的过长的文字隐藏起来; 2.然后hover可以实现显示全文。 实现:方法一: 通过百度,找到了一种传统的实现方法,将两个需求分开实现;
ajax实现点击按钮从后台获取数据 以表格显示内容
&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html&amp;gt;&amp;lt;head&amp;gt;&amp;lt;meta charset=&quot;utf-8&quot;&amp;gt;&amp;lt;script&amp;gt;function loadXMLDoc(url){var xmlhttp;var txt,x,xx,i;if (window.XMLHttpRequest)  {// code for IE7+, Firefox, Chrom...
layui ——数据表格字段内容过多无法全部显示,鼠标悬浮显示省略内容问题!!!
, {field: 'yyy', title: '嘤嘤嘤',align: 'center', width: 500,templet:'&amp;lt;div&amp;gt;&amp;lt;span title=&quot;{{d.yyy}}&quot;&amp;gt;{{d.yyy}}&amp;lt;/span&amp;gt;/div&amp;gt;'}
让很多内容只显示一部分,然后点击展开显示全部
新闻内容,只显示部分,点击展开,可以显示全部新闻内容,点击收起,可以改变为只显示部分内容,通过JS截取字符串实现。
datatables 多余内容点号代替,当鼠标移动上去显示全部内容
动态创建表格的时候,按如下内容 {data:&quot;shopInfo&quot;, render: function(data, type, row, meta) { ; var html; html='&amp;lt;div style=&quot;text-overflow:ellipsis;overflow:hidden;white-space:no...
layui点击table表格的每一格时显示相应的内容
1 $(document).on('click','.layui-table-cell',function(){ 2 // $(&quot;p&quot;).css({&quot;background-color&quot;:&quot;blue&quot;,&quot;font-size&quot;:&quot;14px&quot;}); 3 var x=$(this).offset(), 4 left=x.left, 5 ...
JS实现默认显示部分文字点击按钮显示全部内容
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">     JS实现默认显示部分文字,点击按钮显示全部        民间机构提前3天预报大理地震 地震局称违法  17日大理州5.0级地震发生之后,在微博上一条曾在3天前就预测大理将发生5.0级地震的微博受到了 很多网友的关注。  记者联系上了微博
table &lt;td&gt;显示部分内容鼠标悬停显示全部的实现方法
一,引入layer.js插件(脚本文件);二,自己在代码中添加脚本代码:    //描述鼠标悬停显示全部内容 $(function () { $(&quot;td&quot;).on(&quot;mouseenter&quot;,function() { if (this.offsetWidth &amp;lt; this.scrollWidth) { var that = this; ...
vue内容很多时保证只有一定的高度,点击查看更多再展开所有的
上面是文章的内容,下面有个评论和点赞。要保证无论文章多长,下面的评论和点赞位置一直要在下面,其中一直方式是利用底部菜单的形式:         提交订单 但是如果不想用这种呢? 还有一种就是通过一个查看更多的按钮,点击了才会展开显示所有的内容,不然显示一个页面的。                            标题                 时间
android gridview默认显示部分数据,点击按钮显示全部,再点击回到默认状态,选中变颜色
gridview中先确定有两行,每行三列,放第五个数据之后动态给list添加一个“更多分类”的按钮,点击“更多分类之后”展开显示全部,并且在最后加上“收起”的按钮,在点击“收起”之后回到两行的状态并且出现“更多分类”按钮,隐藏“收起”按钮。并且“更多分类”、“收起”和被选中变色
table某个单元格,显示文字太多则隐藏,点击则显示
最近在项目中看到一段代码,他的显示效果就是,从数据库中获取的数据,如果太多则自动隐藏,点击后就可以显示全部。上代码 ${(pageNo-1)*takeSize+statu.count} ${ent.username} ${ent.roleName} 可用不可用 ${ent.ips} ${ent.company}
table内容超长自动隐藏,鼠标放置后浮动显示全部内容
目录 问题描述 解决思路 相关代码 1.限定td的宽度 2.内容特殊处理 3.全局指定动态指定css样式 4.效果如下 延伸 贴两个关于rem/em/px介绍的参考文献 问题描述 有的时候table作为列表展示记录信息的时候,偶尔会出现某一列数据某一些记录内容变的很长,默认如果没有设置td的宽度话,那界面的样式就丑到爆炸,例如如下这种情况,上一页是正常显示的,第三列的内容长度...
关于点击某个字段的时候弹出一个dialog的方法(显示dialog里面datagrid的表的数据)
第一种方式会出现异常。 解决办法如下:主要是row的应用
点击查看全部,显示其余内容
&amp;lt;style&amp;gt;         #myarticle{             width:700px;             height:300px;             overflow-y:hidden;             border:1px solid green;             margin:20px auto;         }         ...
jQuery 点击按钮,表格增加一行。
添加一行 姓名年龄性别 function addrow(){ var tables = $('.table'); var addtr = $(""+ ""+ ""+ ""+ "&nbsp;删除"+ "");       addtr.appendTo(tables);      } function deleteTrRow(tr){    
默认显示三条数据,点击更多显示余下数据
默认显示三条数据,点击更多显示余下数据
td内容过长,通过title使其隐藏,鼠标移上去显示全部内容
jsp:  #{item.description} css: #description{ overflow: hidden;  white-space: nowrap; text-overflow: ellipsis; }
请问如何在Web页面中点击一个button之后,用jsp从数据库中读取数据显示到表格里
-
列表显示, 内容过长省略显示, 鼠标停留在内容上显示全部内容
&amp;lt;td id=&quot;com&quot; title='{{item.com}}' style=&quot;text-overflow: ellipsis; white-space: nowrap; overflow: hidden;cursor:pointer;&quot;&amp;gt;{{ item.com || &quot;--&quot;}}&amp;lt;/td&amp;gt;
表格td内容过多时,td显示省略号,鼠标移入显示全部内容。
两种方式显示: 1.title方式显示:           .tb{width:800px;font-size:12px;background:#6887D9}   .tb thead th{height:25px;background:#217AC4;color:white}   .tb tbody td{height:22px;background:whi
ExpandableList默认显示三条数据,点击更多显示全部(带上拉下拉)
因为项目需求,所以要做此功能,我的好朋友肖凯直接扔给我一个demo,代码很简单,初学者也可以看懂,demo下载改成自己需要的界面即可一、首先展示一下预览图二、首先展示一下项目结构(开发工具Android studio)三、部分代码(详细请下载demo,本人所有上传资源全部0分) mainActivity package com.szabh.boge;import android.app.Activi
MVC+EasyUI实现查询显示到相应表格
这里要说的显示界面是Razor页面,我们要使用easyui首先应该在界面中添加相应的引用,如下代码,这些都是必要的引用文件,可以根据自己所存放的路径来添加src地址。 @*添加Jquery EasyUI的样式*@ @*添加Jquery,EasyUI和easyUI的语言包的JS文件*@ 下面是实现对EasyUI的DataGird控件操作的JS代码 @*实现对EasyUI的Da
js 实现 单击单元格显示行的详细信息
js 实现 单击单元格显示行的详细信息! 值得下载看看!资源免费,大家分享!!
vuejs数据超出单行显示更多,点击展开剩余数据
说下我在工作中遇到的这个需求 1:页面上的菜单选项,选项内容是后台接口返回的数据,现在的需求是当选项的内容超出一行,在这行的右面显示更多,点击更多,显示剩下的选项的内容 看下效果图 这是展开的效果图 下面先看下我的html部分代码 &amp;lt;div :class=&quot;bussinessType?'show':'hidde'&quot;&amp;gt; &amp;lt;dl&amp;gt; &amp;lt;dt...
在easyui中展开DataGrid的行,显示明细数据
easyui中的DataGrid可以切换不同的视图,当使用detailview时,可以让用户展开行以显示该行的详细信息。行的明细信息可以通过AJAX的方式进行加载。     使用detailview时,首先建立表格基本框架: &amp;lt;table id=&quot;dg&quot; style=&quot;width:500px;height:250px&quot; url=&quot;data/datagrid_data.json&quot; ...
如何设置table,使单元格内容无论多少,只显示一行,超过单元格宽度的部分自动隐藏,当鼠标放到单元格上,内容自动显示完整?
主要包括3个步骤: 设置style <style> .table{ *table-layout: fixed;* } .table td:hover{ overflow: visible; white-space: normal; } .table td { word-wrap: break-word;
jquery操作html,table。点击按钮,逐行滚动显示,自动选中下一行数据
jquery操作html,table。点击按钮,逐行滚动显示,自动选中下一行数据**以下为示例: 以下为代码: 首先html引用jquery.js**<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/cs
点击按钮从数据库中读取数据,然后通过JTable显示
 // 关键部分Vector columnNames = new Vector();        Vector rows = new Vector();        //执行查询,并获取查询结果        try {            String sql = "select * from fnSubject";            con = DBConne
JvaScript--使用js添加数据,点击按钮,将内容放入表格中
 题目要求: 创建一个Student类,有name、age属性和方法showInfo(), 在页面上显示: 姓名&nbsp;&nbsp;|&nbsp;&nbsp;年龄   然后再div中使用js添加数据,每点击一下按钮就显示一条数据,(必须通过p元素去找div) *其中要写一个函数show()用来调用Student类里面的showInfo()函数 function
表格或者div中当内容过多防止撑开,显示固定字数其余用...代替
效果如下 &amp;lt;td&amp;gt;&amp;lt;div class=&quot;wrap&quot;&amp;gt;${labprocesscontent}&amp;lt;/div&amp;gt;&amp;lt;/td&amp;gt;  在 需要固定的位置加上一个div,以及class属性 &amp;lt;style&amp;gt; .wrap{ overflow: hidden; -o-text-overflow: ellipsis; ...
HTML怎么让table表格中的td单元格内容过长显示为固定长度,多余部分用省略号代替,鼠标滑过时显示全文本。
&amp;lt;div style=&quot;white-space: nowrap; text-overflow: ellipsis; overflow: hidden;&quot; title=&quot;{{entity.tm}}&quot;&amp;gt;{{entity.tm}}&amp;lt;/td&amp;gt; 在div中添加样式: width: 150px; //设置需要固定的宽度 white-space: nowrap; //不...
title 属性的使用 当table单元格内容过长时需要用...来代替 ,鼠标移入的时候显示全部内容
使用的dataTable 插件进行操作  columnDefs: [{                 "targets": [0],                 "data": "culture_title",                 "render": function(data, type, full) {                     return
EasyUI Datagrid 鼠标悬停显示单元格内容
EasyUI Datagrid 鼠标悬停显示单元格内容 第一种方式: 1.js 定义函数 "text/javascript"> //格式化单元格提示信息 function formatCellTooltip(value){ return "" + value + "'>" + value + "";
文章热词 机器学习教程 Objective-C培训 交互设计视频教程 颜色模型 设计制作学习
相关热词 mysql关联查询两次本表 native底部 react extjs glyph 图标 通过实例学习java 广西里面游戏开发学校