1. jq怎么在前端做表格的筛选功能
简单做了一个，看看是不是你要的效果：
<!doctypehtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="Generator"content="EditPlus®">
<metaname="Author"content="">
<metaname="Keywords"content="">
<metaname="Description"content="">
<title>Document</title>
<linkrel="stylesheet"href="https://saeedalipoor.github.io/icono/icono.min.css">
<scripttype="text/javascript"src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<!--
<scripttype="text/javascript"src="jquery-3.2.1.js"></script>
-->
<styletype="text/css">
th{
background-color:rgba(3,169,244,0.8);
font-weight:300pt;
color:#fff;
}
th,td{
border:1pxsolid#ccc;
text-align:center;
}
.icon{
display:inline-block;
}
.filter{
text-align:left;
padding:5px10px;
color:rgba(33,150,243,0.8);
font-weight:100pt;width:100px;
display:none;
width:100px;
}
.modal{
display:block;
position:absolute;
overflow:hidden;
outline:0;
-webkit-overflow-scrolling:touch;
background-color:rgb(200,240,160);
filter:alpha(opacity=60);
background-color:rgba(200,240,160,0.45);
z-index:9999;
}
</style>
</head>
<body>
<divclass="lw-we-table"></div>
</body>
</html>
<scripttype="text/javascript">
vardatas=[];
//构造数据
varinitDatas=function(){
for(varidx=0;idx<10;idx++){
datas.push({
type:(idx%3==0?"人类":(idx%3==1?"鸟类":"鱼类")),
unit:(idx%3==0?"个":(idx%3==1?"只":"条")),
quantity:((idx+10)-5)*4/2
});
}
};
//加载数据
varloadData=function(records){
vararr=[];
$(records).each(function(idx,item){
arr.push("<tr>");
arr.push("<td>"+item.type+"</td>");
arr.push("<td>"+item.unit+"</td>");
arr.push("<td>"+item.quantity+"</td>");
arr.push("</tr>");
});
$(".lw-we-table").find("tbody").html(arr.join(""));
};
//设置查询条件
varsetFilter=function(){
$(".filter").addClass("modal");
};
//获取所有选中的条件
vargetCheckedRecords=function(){
varchks=$(".filter").find("input[type='checkbox']:checked");
vararr=[];
$(chks).each(function(idx,item){
arr.push({
value:$(item).val(),
text:$(item).parent().text().trim()
});
});
returnarr;
};
//加载表格
varloadUI=function(){
vararr=[];
arr.push("<tablestyle='width:100%;border:1pxsolid#ccc;'>");
arr.push("<thead>");
arr.push("<thid='type'>种类<divclass='icon'onclick='setFilter(this);'><iclass='icono-hamburger'></i><div></th>");
arr.push("<thid='unit'>单位</th>");
arr.push("<thid='quantity'>数量</th>");
arr.push("</thead>");
arr.push("<tbody>");
arr.push("</tbody>");
arr.push("</table>");
$(".lw-we-table").html(arr.join(""));
//设置图标
$(".icon").mouseover(function(){
$(this).find("i").css("color","#009688");
}).mouseleave(function(){
$(this).find("i").css("color","#ddd");
});
//设置条件
varfarr=[];
farr.push("<divclass='filter'>");
farr.push("<span><inputtype='checkbox'value='人类'checked>人类</span><br/>");
farr.push("<span><inputtype='checkbox'value='鸟类'checked>鸟类</span><br/>");
farr.push("<span><inputtype='checkbox'value='鱼类'checked>鱼类</span><br/>");
farr.push("</div>");
$(".icon").append(farr.join(""));
$(".filter").mouseleave(function(){
$(this).removeClass("modal");
});
//添加事件
$(".filter").find(":checkbox").click(function(){
varfilterDatas=[];
varfilters=getCheckedRecords();
for(varidx=0;idx<datas.length;idx++){
vardata=datas[idx];
for(varfi=0;fi<filters.length;fi++){
varobj=filters[fi];
if(data.type==obj.value){
filterDatas.push(data);
break;
}
}
}
loadData(filterDatas);
});
};
$(function(){
//获取数据（可以从数据库或其他地方获取）
initDatas();
//加载界面UI
loadUI();
//加载数据
loadData(datas);
});
</script>
2. 前端问题：为什么我在css文件中对表格进行了设置而在页面中却并没有显示出效果呢
去掉你的style 标签
table,tr,td { border:1px solid blue; }
要注意你有没有引入了这个css 。在htest.html文件里面的header 标签里面
通过link 引入你的这个css 文件
3. 如何让前端以表格形式动态展示后端Python的数据
主要就是js对数据的操作和对dom的操作。 前端的工作就是切图，展示数据到网页中。那么怎么获取数据呢？以什么格式获取数据呢？都是需要和后台交互的。 后台语言都是不一样的：php，jsp等等，我们前端js的工作就是把他们的数据拿过来显示。
4. SpringMVC+mybatias的框架前端页面显示表格要用jquery datatable显示
<scripttype="text/javascript"src="../../Scripts/jquery.js"></script>
<scripttype="text/javascript"src="../../Scripts/jquery.dataTables.min.js"></script>
<linkrel="Stylesheet"type="text/css"href="../../common/jquery.dataTables.min.css"/>
<scripttype="text/javascript">
$(document).ready(function(){
$('#example').dataTable({
"aLengthMenu":[[2,4,8,10,20,50,-1],[2,4,8,10,20,50,"All"]],
"oLanguage":{
"sLengthMenu":"每页显示_MENU_条记录",
"sZeroRecords":"抱歉，没有找到",
"sInfo":"从_START_到_END_/共_TOTAL_条数据",
"sInfoEmpty":"没有数据",
"sInfoFiltered":"(从_MAX_条数据中检索)",
"oPaginate":{
"sFirst":"首页",
"sPrevious":"前一页",
"sNext":"后一页",
"sLast":"尾页"
},
"sZeroRecords":"没有检索到数据"
}});
});
再加个<tableid="example"cellspacing="0">
记得要使用<tbody></tbody>
5. 前端使用了许多bootstrap的表格，该怎么兼容手机页面
bootstrap对表格的自适应效果是通过滚动条来实现的,手机屏幕下自动产生滚动条,左右拖动。
6. 如何让Excle表格中的某个单元格一直在页面前端显示
在EXCEL中可以用冻结空格功能，光标定位到需要不动行的下一行，视图－－窗口－－冻结空格；
你的截图为WORD，让WORD表格的每页都显示标题，选中表格的标题行，表格工具－－布局－－数据－－重复标题行。
7. Web前端怎样实现像excel那样的按列拖选的表格
Web前端实现像excel那样的按列拖选表格的方法：
1.通过flash，flex实现FLEX 功能强大的datagrid
2.通过jquery插件，js实现
JS实现可编辑的表格，双击可编辑，可以删除行和列，增加行和列，重置，导出表格，也可以上下移动元素
Flexigrid – Web 2.0 Javscript Grid for jQuery - 可变列宽，自动适应表头宽度，可通过 Ajax 连接 XML 数据源，类似 Ext Grid，但基于 jQuery 因此更轻量小巧。
8. 前端组件“可编辑表格”，怎么设计才好
第一，view层，需要分层设计；
第二，model层，需要让数据来控制view层；
思路的话，可以参考react的生命周期概念:
1，插入dom；
2，获得新数据，重新渲染dom；
3，删除dom；
咱们也一样给这三种状态各提供二种处理函数，
will是事前调用；
did是事后调用；
还要有公开出来的setget方法
9. 前端框架快速做出表格形状的数据库外观， 有哪些，
bootstrap就有很多，或者你用vue写使用iview的ui框架，其实还有很多ui框架都有你需要的功能
有各种样式的表格，简简洁，美观
10. layui前端框架表格如何进行屏幕适配
使用IDV ，外层DIV画进度条矩形边框，内层DIV使用JS，进行填充宽度