实现点击全部表格里面显示全部内容、点击通过表格里面只显示通过的数据 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问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
通过点击表格行实现单选、全选
效果图 不管三七二十一,一图走天下,如下: 应用场景 更好的用户体验,不需要精准的点击小小的CheckBox实现单选全选 html &amp;lt;div class=&quot;table-box&quot;&amp;gt; &amp;lt;table&amp;gt; &amp;lt;thead&amp;gt; &amp;lt;tr class=&quot;check-all&quot;&amp;gt;...
通过点击按钮隐藏表格怎么实现?
有两个表格,内容基本一样,就标题不一样,想放在同一个确定的地方,通过两个按钮控制一个显示一个隐藏,怎么做?用AP Div绘制就把握不了在哪了。跪求高手
将数据显示在表格里面
1、请问一下,Ext.Ajax.Request()发送的请求与通过formPanel.submit()有什么不一样。rnrn2、有这样子一个小小的需求,有一个员工信息添加页面,addEmployee.jsp, 有一个显示员工信息页面,放一个表格用来显示,在添加完数据之后,显示所添加的数据。rn 就是在信息添加页面,提交请求,然后保存成功,在直接跳转到另外一个页面,把刚刚添加的信息显示在一个表格里面。rn提交请求之后,是以JSON格式化数据的。 显示数据的表格里面用的是在一个js文件里面用GirdPanel,在显示页面(jsp页面)里面只是直接引入这个js文件就可以了。rnrn 如果直接jsp里面用标签,我可以将添加的数据直接在表格里面显示,但是现在因为要放到js文件里面的GirdPanel里面,不清楚怎么进行交互了。怎么将传到显示那个页面。rnrn[code=Java]rnrnfunction submit() rn Ext.getCmp("empForm").getForm().submit(rn waitMsg : "正在提交数据……",rn waitTitle : "提示",rn url : "addEmployee_test.action",rn method : "POST",rn success : function(form, action) rn document.location = "addEmployee_skipPage.action";rn ,rn failure : function(formm, action) rn Ext.Msg.alert(" 提示", "保存失败:");rn rn );rnrnrn 这个是请求结束之后,跳转到另外一个页面、rn[/code]rnrnrn谁能帮帮忙呢
点击表格显示另一个表格
点击表格显示另一个表格 (开发工具与关键技术:VS .NETMVC 作者:纳兹,撰写日期:2019.05.27源于:老师上课教程) 下面为点击一个(主表)表格中某一条数据显示另一张表(副表)与之相对应的代码。下面为公告类型表格的点击显示公告类型明细表格内容的显示例子。 主表的显示首先通过Linq查询,查询出第一张表需要显示的数据。下图例子通过查询公告类型表,通过表ID查询出里面需要显...
怎么样检查点击是否在一个表格里面
比如一个页面有很多表格,我想知道两次点击的表格是否一样,不能用ID,CSS之类的区分,可能两个表格的结构是一模一样的,这样可以检查出来吗?
table表格里面td的点击冒泡事件
html部分: 项目一: 进行中:100 未完成:33 已处理问题:21 待解决问题:23 项目二:
表格数据通过点击传数据给Bootstrap模态窗口
li { list-style: none; } .modal-li li { height: 45px; line-height: 45px; } .text-input { display: inline-block; width: 80%; margin-left: 10px; }
表格的点击
我希望在表格里点击一下,该格的值就放到同一页面的一个文本框内。用vbscript javascript怎么做?rnrn注:表格除了标题外,其余的行是动态产生的。rn
点击表格单元格显示下拉菜单
在后台动态生成了一个DataTable,想实现当鼠标单击单元格时显示下拉菜单,选择后表格单元格的内容为选择的项。应该怎么做啊!大家帮帮忙。rn
点击时获取表格的数据
var menuId = $(this).children(0).html(); 在哪个上边加的点击事件,都会获取得到的值,children(0)表示第一个,第二个是children(1),依次类推
如何实现点击按钮后显示表格
具体步骤,详细代码,在线等,急。
如何实现点击表格行显示提示?
由于有一个数据库表的字段有17个,如果全部显示的话太多了,所以想只显示几个重要的字段rn然后通过双击可以进入查看所有的字段(已经通过实现了)rn现在想要让用户单击行的时候会出现提示(如,"双击查看详细信息")rnrn本来是想移动到行的时候onMouseOver就显示提示rn但是想想那会不会太快了(或者先判断在行中停留超过1秒才提示)rn或者是有什么办法显示,在表格中(不要求是在哪一行,只要在表格内就行)停留超过2秒以上,就显示提示rn希望不使用第三方库实现,就纯JS脚本
vb如何实现点击按钮显示表格?
然后点击“检定记录”按钮后,显示表格,可以向表格输入数据。请给出具体的操作方法和详细的代码。我们单位就我一个人做软件,没别的人问啊,我急。rn
在水晶报表里面实现多个表格
要在一张纸里面打印两个小的表格(宽度都很宽的),而且两个表格都有自己的表头。rn 请问在水晶报表里面怎么实现呀?rn 先说声谢谢了!
鼠标点击html表格表头实现表格数据自定义排序
/** * 表格数据自定义排序,数据按int(float、string、date)进行升序或降序排列   */ // 排序 tableId: 表的id,iCol:第几列从0开始 ;dataType:iCol对应的列显示数据的数据类型,例如:日期就是date function sortAble(th, tableId, iCol, dataType) { var ascChar = &quot;▲&quot;...
horizontalscrollview里面item点击的实现
horizontalscrollview之前在网上没有找到这方面的资源,由于项目需要,自己研究了一下,现在分享给需要的朋友
Frangment里面实现点击跳转
public class InteractFragment extends Fragment rn TableRow table1;rn TableRow table2;rn TableRow table3;rn Context context;rn //implements OnClickListenerrn// @Overridernrnrn @Overridern rn public View onCreateView(LayoutInflater inflater, ViewGroup container,rn Bundle savedInstanceState) rn //return container;rn // TODO Auto-generated method stubrn System.out.println("InteractFragment");rn View view = View.inflate( context,R.layout.main_interact, null);rn table1 = (TableRow) view.findViewById(R.id.more_intertact_row1);rn table2=(TableRow) view.findViewById(R.id.more_intertact_row2);rn table3=(TableRow) view.findViewById(R.id.more_intertact_row3);rn table1.setOnClickListener(new OnClickListener()rn @Overridern public void onClick(View v) rn // TODO Auto-generated method stubrn switch (v.getId()) rn case R.id.more_intertact_row1:rn Intent intent1=new Intent(InteractFragment.this.getActivity(),MistakeActivity.class);rn context.startActivity(intent1);rn break;rn rn case R.id.more_intertact_row2:rn //Intent intent2=new Intent(context,);rn break;rn rn rn );rn rn return inflater.inflate(R.layout.main_interact, container, false);rnrn rnrnrn// rn// public void initDate() rn// // TODO Auto-generated method stubrn// View view = View.inflate(context, R.layout.main_interact, null);rn// table1 = (TableRow) view.findViewById(R.id.more_intertact_row1);rn// table2=(TableRow) view.findViewById(R.id.more_intertact_row2);rn// table3=(TableRow) view.findViewById(R.id.more_intertact_row3);rn// table1.setOnClickListener(this);rn// table2.setOnClickListener(this);rn// table3.setOnClickListener(this);rn// rn rn rn// @Overridern// public void onClick(View v) rn// // TODO Auto-generated method stubrn// switch (v.getId()) rn// case R.id.more_intertact_row1:rn// Intent intent1=new Intent(InteractFragment.this.getActivity(),MistakeActivity.class);rn// context.startActivity(intent1);rn// break;rn//rn// case R.id.more_intertact_row2:rn// //Intent intent2=new Intent(context,);rn// break;rn// rn// rn// public void onActivityCreated(Bundle savedInstanceState) rn// // TODO Auto-generated method stubrn// super.onActivityCreated(savedInstanceState);rn//rnrnrnrnrn rnrn rnrn rnrn rn rn rn rnrn rn rn rn rn rnrn rn rn rn rn rnrn rnrn rn rn rn rn rn rnrnrnrnrn运行后View view = View.inflate( context,R.layout.main_interact, null);报空指针 该怎么改,xml里面的onclick放在那里比较好
在表格里面加载页面
请问怎么在表格里面加载页面啊?rn在线等啊?
iview表格里面自定义样式
表格里面需要动态添加样式;例如表头加粗,不同的背景颜色。。。。 { title: "启用状态", key: "state", align: "center", minWidth: 100, render:(h,params)=&gt;{ return h( '...
测试用例------表格里面插入图片
表格分类:Excle表格,wps表格,Office表格...功能 1.表格里能否插入图片 2.能否插入各种格式的图片 bmp,jpg,png,tif,gif,pcx,tga,exif,fpx,svg,psd,cdr,pcd,dxf,ufo,eps,ai,raw,WMF,webp等。 3.能否插入结构图 4.能否插入图表柱状图饼图 5.能否插入关系图 6.能否插入组织结构图smartA...
在dbGrid表格里面跳转
[delphi] procedure TfrmStaff.wdbgStaffKeyPress(Sender: TObject; var Key: Char); begin inherited; if key = #13 then begin if wdbgStaff.SelectedIndex < wdbgStaff.FieldCount-1 then wdbgSt
panel控件里面表格
[img=https://img-bbs.csdn.net/upload/201508/03/1438585011_967443.png][/img]rn我想把panel里面写成跟上下表格一样的表格 ,结果试了好几种方法,都没办法把加上去。是该怎么写?
点击表格拖动排序
拖动表格进行排序,需要引进jquery包,在页面引用jquery,就可以了
表格点击问题
有一个表格太长了,我把它变短,然后再最后一个选项写个详情,现在如何实现点击这个详情显示后面的其他信息。 rn 求代码。。
绘制表格,点击选中
在单文档中绘制表格,单击选中,并显示背景色
点击按钮,动态添加表格
通过按钮事件,实现动态添加表格元素,可以获得更多的表格
点击表格变色
我有1个表格中间数字取自服务器数据库,非常宽,导致用户看表格时很难对齐到底是哪条记录。我想做到如下效果:点击表格某处,表格的这一行即变色。问如何达到
点击表格便可编辑
&amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=gb2312&quot;&amp;gt; &amp;lt;title&amp;gt;新建网页 1&amp;lt;/title&amp;gt; &amp;lt;/head&amp;gt; &amp;lt;body&amp;gt; &amp;lt;fo
手势与表格的点击事件处理
#pragma mark - UIGestureRecognizerDelegate - (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldReceiveTouch:(UITouch *)touch{ UITableViewCell *cell = [UITableViewCell new
点击复选框自动生成表格
jquery自动生成表格 根据复选框选中的数据自动生成表格实现图中第一张表的内容
element table组件表格里面套表格
在我的项目里面有这样一个需求,表格里面展开项是一个表格,且嵌套的表格头部是动态列。以下是html代码,tableData是外层表格的数据(下面我就将外层表格称为大表格,里面嵌套的表格称为小表格) &amp;amp;lt;el-table :data=&amp;quot;tableData&amp;quot; align=&amp;quot;center&amp;quot; stripe&amp;amp;gt; &amp;amp;lt;!-- 展开项表格开始位置 type=&amp
关于在表格里面,表格间距的问题
假设有一个table表格rn我希望该表格td进面的表格,我都希望表格前后都空出我要的空位出来行吗rn1px 2px随我定rn rn rn rn控制在这里面的表格都空出我要的位rnrnrn
超宽表格全部显示
<img src="https://img-bss.csdn.net/201908060634374647.jpg" alt="" /><img src="https://img-bss.csdn.net/201908060634421196.png" alt="" /><img src="https://img-bss.csdn.net/201908060634463783.png" alt="" /><img src="https://img-bss.csdn.net/201908060634516454.png" alt="" /><img src="https://img-bss.csdn.net/201908060634556779.png" alt="" /><img src="https://img-bss.csdn.net/201908060635012536.png" alt="" />
点击表格的数据,通过表格中的外键ID进行回填外键的表
开发工具与关键技术: MVC/#C 作者:张文静 撰写时间:2018/12/22-2019/1/22 1、 首先通过下拉框改变事件或者点击日期查询表格中的数据,见图1 图1 2、 查询表格中所有的数据,判断销售时间不为空,筛选项目不为空;当数据类别不一致时,用Convert进行强制转换,查询它的总行数,实例化Bsgrid,返回实体。见图2、图3、图4, 图2 图3 图4 3、 在表格中,声...
向word里绘制表格并往表格里面放数据???????
下面是正确的代码放表格可以,rn只是但往里面填充数据好象没用,麻烦给我大家看看,谢谢rnrnrnDim wd As New Word.Applicationrn'插入一个3列6行的表格rnwd.Documents.Add DocumentType:=wdNewBlankDocumentrnwd.ActiveDocument.Tables.Add Range:=wd.Selection.Range, NumRows:=6, NumColumns _rn :=3, DefaultTableBehavior:=wdWord9TableBehavior, AutoFitBehavior:= _rn wdAutoFitFixedrnrn'给每行表格插入数据rnSet oDoc = Word.ActiveDocumentrn Set oTable = oDoc.Tables.Add(Range:=oDoc.Range(Start:=0, End:=0), NumRows:=6, NumColumns:=3)rn iCount = 1rn For Each oCell In oTable.Range.Cellsrn oCell.Range.InsertAfter "第 " & iCount & "单元格"rn iCount = iCount + 1rn Next oCellrn oTable.AutoFormat Format:=wdTableFormatColorful2, ApplyBorders:=True, ApplyFont:=True, ApplyColor:=Truernrn'将光标移到最后rnwd.Selection.EndKey Unit:=wdStoryrn'插入分页符rnwd.Selection.InsertBreak Type:=wdPageBreakrnwd.Visible = Truernwd.ShowMernSet wd = Nothing
如何通过点击表格的某列,获得该行的行数?
rnrn1rn2rn3rnrnrn问题: 如何在我选中checkbox时 获得checkbox所在该行的行数?
怎么通过js控制,点击表格后设置 tr 的背景色?
每个tr有个唯一的编号rnrnjs不熟 这个js函数该怎么写?rn谢谢
怎样用C#解析网页表格,并获取表格里面数据
怎样用C#解析网页表格,并获取表格里面数据rnrn有一个网页,里面有很多内容,其中有2个表格,表格里面有数据,我想将这些数据读到数据库中。但是我不知道怎么将表格的数据读出来?请问,怎么可以将表格的数据读出来呀? rn 给些思路呀rnrn而且怎么用工具判断这些数据的行号和列号呢?rn
treeview想要在表格里面显示
treeview想要在表格里面显示 rn就是我展开treeview的时候子结点也都要在表格中 或者datagrid中显示 rn不知道有没有人遇到和我一样需求的? 我应该怎么做?
Jeditorpane 里面显示HTML表格问题
我有一个Jeditorpane, 在里面放了一段html表格的代码,因为我不想要要粗线边框表格,我就找了段细线表格代码,但是我在IE浏览器中显示的细线表格,为什么在Jeditorpane里面还是粗线的?rnrnrn