<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>jquery测试的</title> <style type="text/css"> #table{ border: 1px solid #0066cc; border-collapse: collapse; width: 600px; } tr{ height: 30px; } th{ border: 1px solid #0066cc; } td{ border: 1px solid #0066cc; text-align: center; } a{ text-decoration: none; margin-left: 10px; } .popdiv{ width: 500px; border: 1px solid #cccccc; position: absolute; left: 50%; margin-left: -520px; top: 100px; background: white; padding: 10px; display:none; z-index:4; } .popdiv p{ border-bottom: 1px solid slateblue; } .input{ margin: 10px; width: 400px; height: 40px; font-size: 20px; } .input .in{ width: 220px; height: 30px; } .input .btn{ font-size: 14px; padding: 8px 30px; } </style> <script src=" http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"> </script> </head> <body> <div class="input"> <input type="text" value="" placeholder='请输入任意相关信息' class="in"> <input type="button" value="重新搜索" class="btn"> </div> <table id="table"> <tr id="t"> <th>姓名</th> <th>年龄</th> <th>职业</th> <th>工资</th> <th>操作</th> </tr> <tr> <td>张三</td> <td>28</td> <td>java工程师</td> <td>8000</td> <td><a href="#" class="view">查看</a><a href="#">修改</a><a href="#" class="del">删除</a></td> </tr> <tr> <td>李四</td> <td>30</td> <td>前端工程师</td> <td>10000</td> <td><a href="#" class="view">查看</a><a href="#">修改</a><a href="#" class="del">删除</a></td> </tr> <tr> <td>成龙</td> <td>60</td> <td>演员</td> <td>100000</td> <td><a href="#" class="view">查看</a><a href="#">修改</a><a href="#" class="del">删除</a></td> </tr> </table> <!--查看详细的div--> <div class="popdiv"> <p><strong>姓名:</strong><span></span></p> <p><strong>年龄:</strong><span></span></p> <p><strong>职业</strong><span></span></p> <p><strong>月薪</strong><span></span></p> <a href="#" class="close">关闭</a> </div> <script> $('.view').click(function(){ //添加一个遮罩层; var makeHeight=$(document).height(); var makeWidth=$(document).width(); $('<div class="make"></div>').appendTo($('body')); $('div.make').css({ "background":"#000000", "opacity":0.4, "position":"absolute", "left":0, "top":0, "width":makeWidth, "height":makeHeight, "z-index":2 }); var arr=[]; $(this).parent().siblings().each(function(){ arr.push($(this).text()); }) $('.popdiv').show().children().each(function(i){ $(this).children('span').text(arr[i]); }); }); //关闭 $('.close').click(function(){ $(this).parent().hide(); $('.make').remove(); }); //删除 $('.del').click(function(){ $(this).parents('tr').remove(); }); //搜索 $('input[type=text]').keyup(function() { var text = $('input[type=text]').val(); if(text!==''){ $("table tr td:contains('"+text+"')").css("color", "red");//高亮当前输入的字符 //$("table tr td:contains('"+text+"')").wrap("<span style='color: red'></span>"); $('table tr:not(\'#t\')').hide().filter(":contains('" + text + "')").show(); }else{ history.go(0)//刷新当前页的方法 location.reload(); } }); $('input[type=button]').click(function(){ //刷新当前页面 history.go(0) }); $(function () { $("#btnSearch").click(function () { $("div:contains('simple')").css("border", "4px solid blue"); }); }); </script> </body> </html>
js搜索高亮
猜你喜欢
转载自blog.csdn.net/qq_26959879/article/details/80065331
今日推荐
周排行