JS动态表格数据查询筛选特效代码下载


JS动态表格数据查询筛选特效代码下载
JS动态表格数据查询筛选特效代码下载以及动态表格、数据查询筛选等js/jquery网页特效代码下载。

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/index/proindex.css" />

2. 引入JS

<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/axios.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/api.js" type="text/javascript" charset="utf-8"></script>
<script src="js/Allin.js" type="text/javascript" charset="utf-8"></script>

3. HTML代码

<div style="margin-top: 43px;margin-left: 16px;">
	<div id="app">
		<table border="0" cellspacing="0" cellpadding="10" style="width: 100%; text-align: center;margin-top: 40px;">
			<thead>
				<div class="button_line">
					项目名称:<input type="text" id="filtertxt1">
					<button class="btn1" id="Search">搜索</button>
				</div>
				<tr>
					<th>项目名称</th>
					<th>项目编码</th>
					<th>项目进度标志</th>
					<th>项目状态</th>
					<th>项目负责人</th>
				</tr>
			</thead>
			<tbody id="table_proindex">
				<tr v-for="value in info" class="second_tr">
					<td>{{ value.idname}}</td>
					<td>{{ value.procode}}</td>
					<td>{{ value.prosign}}</td>
					<td>{{ value.prozhaungtai01}}</td>
					<td>{{ value.proper}}</td>
				</tr>
			</tbody>
		</table>
	</div>
</div>
<script type="text/javascript">
$(function() {
	$('#Search').click(function() {
		var txt = $('#filtertxt1').val();
		$("table tbody tr")
			.hide()
			.filter(":contains('" + txt + "')")
			.show();
	})
});
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>

相关推荐

发表评论

相关文章