Juquery进行表格的检索功能和Semantic-UI进行相关的样式 的修饰
Posted SmallCuteMonkey
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Juquery进行表格的检索功能和Semantic-UI进行相关的样式 的修饰相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
</head>
<body>
<div class="ui header" style="margin-top: 100px;">
</div>
<div class="ui container">
<center>
<table class="ui compact celled definition table" width="50%" height="40%" >
<!-- 这一块和下面的jQuery实现检索功能 -->
<div class="ui inverter input">
<input type="text" id="filtertxt" placeholder="Search..." size="100" height="160">
<input type="button" class="ui basic teal circular button" id="ss" value="搜索" style="margin-left: 50px;"/>
</div>
<!-- -->
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>暂住地</th>
</tr>
</thead>
<tbody>
<tr>
<td>张选江</td>
<td>男</td>
<td>湖南</td>
</tr>
<tr><td>丁雪建</td>
<td>女</td>
<td>湖南怀化</td>
</tr>
<tr><td>李四</td>
<td>女</td>
<td>湖南长沙</td>
</tr>
<tr><td>找六</td>
<td>男</td>
<td>浙江</td>
</tr>
<tr><td>stillness</td>
<td>男</td>
<td>湖南邵阳</td>
</tr>
<tr><td>houfang</td>
<td>女</td>
<td>湖南邵阳</td>
</tr>
<tr><td>王二</td>
<td>男</td>
<td>浙江</td>
</tr>
<tr><td>吴岳</td>
<td>男</td>
<td>广州</td>
</tr>
<tr><td>being</td>
<td>女</td>
<td>湖南永州</td>
</tr>
</tbody>
</table>
<!-- 这些样式使用的是Semantic-UI的样式，可以使用一下，需要引入Jquery和Semantic-ui.css
可以使用http://-->
<div class="ui circular buttons">
<button class="ui green circular basic button">首页</button>
<button class="ui circular red basic button">上一页</button>
<button class="ui circular blue basic button">下一页</button>
</div>
</center>
</div>
<!--必须引入相关拥Jquery的包，否则会检验不到-->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<!--Semantic-UI需要使用前端组件进行实现才可以-->
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
<script type="text/javascript">
$(function(){
//ss获取搜索的点击事件
$('#ss').click(function(){
//获取输入表格的值，进行相关的搜索
var sstxt=$('#filtertxt').val();
$("table tbody tr")
.hide()
.filter(":contains('"+sstxt+"')")//把包含sstxt的值进行过滤
.show();//把值进行展现，这样就可以进行
})
})
</script>
</body>
</html>以上是关于Juquery进行表格的检索功能和Semantic-UI进行相关的样式 的修饰的主要内容，如果未能解决你的问题，请参考以下文章
TF前沿推出 Semantic Reactor：让电子表格理解自然语言