Jquery 操作报表在表格中查询 _Web前端

Jquery 操作表格在表格中查询

Jquery?

在js 中操作表示一般使用DOM 比较麻烦这里给大家介始一个

jquery 的使现

目的也是为了帮助朋友解决一个项目有的问题

<!--
/**
 * author liuqing
 * 2010-10-6 
 * 希望对大家有帮助
 */
-->
<html>
<head>
<style type="text/css">
//定义背景色CSS
.hover {
	background-color:#00f; color:#fff;
}
</style>
<!--引入Jquery枋心包-->
<script type="text/javascript" src="js/jquery-1.6.min.js"></script>
<script type="text/javascript">
//使用Jquery 为表格添加鼠标移动改变背景
$(document).ready(function() {
	$('tbody tr').hover (
		function() {
			$(this).find('td').addClass('hover');
		},
		function() {
			$(this).find('td').removeClass('hover');
		}
	);
});
</script>
<script type="text/javascript">
//查询方法
function seach() {
	$('#us').find('tbody tr').hide();
	var trs = $('#us').find('tbody tr');
	for (var i = 0 ; i < trs.length; i++) {
	    if ($(trs[i]).attr('id') == 1234 || $(trs[i]).attr('id') == 22233 
		|| $(trs[i]).attr('name') == 'aaa' || $(trs[i]).attr('title') == 'xy') {
			$(trs[i]).show();
		}
	}
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>表格查询</title>
</head>

<body>
<input type="button" onclick="seach()" value="2321321" />
<div id="usb">
<table width="100%" id="us" class="usb22" border="1">
 <thead>
  <tr>
    <th>username<input id="232" type="hidden" /></th>
    <th>password</th>
    <th>operation</th>
  </tr>
 </thead>
  <tbody>
  <tr id="1234" name="xxx">
    <td>Liuqing<input id="2321" type="hidden" /></td>
    <td>ewqewq</td>
    <td>ewqew</td>
  </tr>
  <tr id="222">
    <td>wewe<input id="2322" type="hidden" /></td>
    <td>ewe111111111111</td>
    <td>wewew</td>
  </tr>
  <tr id="222" title="xy">
    <td>weweTITLE<input id="2322" type="hidden" /></td>
    <td>ewe</td>
    <td>wewew</td>
  </tr>
  <tr id="22233">
    <td>Wanwanwan<input id="2322" type="hidden" /></td>
    <td>ewe</td>
    <td>wewew</td>
  </tr>
  <tr id="222" name="aaa" >
    <td>wewe<input id="2322" type="hidden" /></td>
    <td>ewe555555555</td>
    <td>wewew</td>
  </tr>
  </tbody>
</table>
</div>
</body>
</html>