表单中输入内容,搜索时,下面table中该列中包含关键字的高亮显示

  有时候为了在搜索时清楚直观,需要关键字的高亮显示,

  效果如下:

 

  思想:在下面table中,本来应该是直接渲染数据,此时,可以先写一个方法,里面包含两个参数,分别是该显示的内容以及进行搜索时输入的关键字,在该方法中,进行判断,若是该列内容中包含关键字,则将关键字颜色改变,然后替换掉;若是没有,则还是原样显示。

表单中:

  

table表格中:

  

此时需要写关键字高亮显示的方法:

  

在该方法中,可以使用if判断来进行替换,也可以使用正则来写。

原文地址:https://www.cnblogs.com/5201314m/p/11113310.html

时间: 2024-08-10 09:17:28

表单中输入内容,搜索时,下面table中该列中包含关键字的高亮显示的相关文章

监听表单中的内容变化

一.总结: 今天项目中要给表单控件添加搜索选择的效果,如下: 红框圈住的表单被点击之后,弹出如下框: 然后根据用户的搜索条件要显示查询结果供用户选择. 总结如何监听表单中的内容变化: 方法一: 1. 实现代码: 上面的代码实现出来的效果(类似百度搜索框)是,当用户在搜索框中输入查询条件,每当搜索框中的内容改变就会触发监听事件,并向服务器发送请求,搜索框下方相应的就显示查询到的结果.每次在将查询到的结果设置在界面之前都将前一次查询显示的数据从界面上remove掉,用这个方法来解决界面显示多条重复数

jquary 表单输入内容 表格接收 分页符

表格的悬浮换色  点击换色  隔行换色 $("tr:even").addClass("gaoliang"); $("tr").mouseover(function(){ $(this).addClass("xf");    }).mouseout(function(){     $(this).removeClass("xf");    }).click(function(){     $(this).ad

jquery获取form表单中的内容,并将表单内容更新到datagrid的一行

1 //执行不刷新页面更新所修改的行 2 var arr = $('#patient_form').serializeArray();//将表单中的数据格式化成数组 3 var m = new Array(); 4 //取数组中各个输入框对象的值,放在数组m中 5 $.each(arr, function(i,val){ 6 m[val.name] = val.value; 7 }); 8 //更新行 9 $('#dgRequest').datagrid('updateRow',{ 10 ind

EditText 使用细节(输入内容改变时的监听事件、透明背景、修改提示文字颜色、输入内容密文显示)

1.对EditText的输入内容进行监听,给EditText 绑定 addTextChangedListener 监听事件 即可. 2.EditText输入内容,密文显示: android:password="true" 3.将EditText边框设置成透明的: android:background="#00000000" 4.修改EditText中hint文字颜色: android:textColorHint="#ffffff" 很多时候,我们

点击GridView中TextBox弹出输入对话层,输入内容反传回先前点击的TextBox中(Jquery获取GridView中TextBox的ID)

项目中,由于用户反映说:GridView表中的输入框太小,不方便输入,特别是在输入内容多的时候.问能不能点击GridView中输入框的时候能弹出一个大的内容输入对话框. 介于用户的要求,我就开始修改. 先想到的就是我用Jquery在GridView中TextBox上添加一个focus焦点捕捉事件,当点击时触犯弹出内容输入框. 然后就是当输入完毕的操作了,我又使用内容输入框(其实也是一个TextBox)的焦点失去事件(blur),在该事件中先把值反馈回先前点击的GridView中的那个TextBo

打印输入表单中的内容

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS选择器</title> </head> <body> <form> <p> <label for="username">用户名</label> <inpu

使用JavaScript使表单中的内容显现在屏幕上

一.使内容水平出现 <html> <head> <title>测试</title> <script type="text/javascript"> function to() { var txt=document.getElementById("txt").value; document.getElementById("a").innerHTML+=txt; } </script&

验证表单中输入的特殊字符

1.前台表单通过js过滤掉特殊字符 function stripscript(s) { var pattern = new RegExp("[`[email protected]#$^&*()=|{}':;',\\[\\].<>/?~!@#¥……&*()——|{}[]‘::”“'.,.?\"]"); var rs = ""; for (var i = 0; i < s.length; i++) { rs = rs + s.

当form表单中只有一个input时按回车键将会自动将表单提交

添加一个<input type='text' style='display:none'/>不显示输入框,然后回车之后也不会提交.