- 论坛徽章:
- 0
|
|
Jquery 操作表格在表格中查询
Jquery
在js 中操作表示一般使用DOM 比较麻烦这里给大家介始一个
jquery 的使现
目的也是为了帮助朋友解决一个项目有的问题
Java代码- 1.<!--
- 2./**
- 3. * author liuqing
- 4. * 2010-10-6
- 5. * 希望对大家有帮助
- 6. */
- 7.-->
- 8.<html>
- 9.<head>
- 10.<style type="text/css">
- 11.//定义背景色CSS
- 12..hover {
- 13. background-color:#00f; color:#fff;
- 14.}
- 15.</style>
- 16.<!--引入Jquery枋心包-->
- 17.<script type="text/javascript" src="js/jquery-1.6.min.js"></script>
- 18.<script type="text/javascript">
- 19.//使用Jquery 为表格添加鼠标移动改变背景
- 20.$(document).ready(function() {
- 21. $('tbody tr').hover (
- 22. function() {
- 23. $(this).find('td').addClass('hover');
- 24. },
- 25. function() {
- 26. $(this).find('td').removeClass('hover');
- 27. }
- 28. );
- 29.});
- 30.</script>
- 31.<script type="text/javascript">
- 32.//查询方法
- 33.function seach() {
- 34. $('#us').find('tbody tr').hide();
- 35. var trs = $('#us').find('tbody tr');
- 36. for (var i = 0 ; i < trs.length; i++) {
- 37. if ($(trs[i]).attr('id') == 1234 || $(trs[i]).attr('id') == 22233
- 38. || $(trs[i]).attr('name') == 'aaa' || $(trs[i]).attr('title') == 'xy') {
- 39. $(trs[i]).show();
- 40. }
- 41. }
- 42.}
- 43.</script>
- 44.<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- 45.<title>表格查询</title>
- 46.</head>
- 47.
- 48.<body>
- 49.<input type="button" onclick="seach()" value="2321321" />
- 50.<div id="usb">
- 51.<table width="100%" id="us" class="usb22" border="1">
- 52. <thead>
- 53. <tr>
- 54. <th>username<input id="232" type="hidden" /></th>
- 55. <th>password</th>
- 56. <th>operation</th>
- 57. </tr>
- 58. </thead>
- 59. <tbody>
- 60. <tr id="1234" name="xxx">
- 61. <td>Liuqing<input id="2321" type="hidden" /></td>
- 62. <td>ewqewq</td>
- 63. <td>ewqew</td>
- 64. </tr>
- 65. <tr id="222">
- 66. <td>wewe<input id="2322" type="hidden" /></td>
- 67. <td>ewe111111111111</td>
- 68. <td>wewew</td>
- 69. </tr>
- 70. <tr id="222" title="xy">
- 71. <td>weweTITLE<input id="2322" type="hidden" /></td>
- 72. <td>ewe</td>
- 73. <td>wewew</td>
- 74. </tr>
- 75. <tr id="22233">
- 76. <td>Wanwanwan<input id="2322" type="hidden" /></td>
- 77. <td>ewe</td>
- 78. <td>wewew</td>
- 79. </tr>
- 80. <tr id="222" name="aaa" >
- 81. <td>wewe<input id="2322" type="hidden" /></td>
- 82. <td>ewe555555555</td>
- 83. <td>wewew</td>
- 84. </tr>
- 85. </tbody>
- 86.</table>
- 87.</div>
- 88.</body>
- 89.</html>
|
|
免费注册
发表于 2011-08-24 23:53