Skip to main content

Search using Javascript: Part - 1 Searching the text from html table


Hi all,

Here is my first programming stuff.
This demo is about implementing search operation on your webpage.





Here is the source code:

HTML and JavaScript:

 <!DOCTYPE html>
<html>
<head>

 <title>Searching the text html table </title>
<style>
 table{border: 1px solid #000 }
 td{border: 1px solid #000; font-size: 20px; padding: 10px; }
 tr:nth-of-type(even){background-color: yellow; }
</style>
</head>
<body>
<h3> Table</h3><p></p>
<table class="tabl" name="tabName1" id="tabId1">
<tr> 
<th class="tdClassname"> Name </th>
<th class="tdClassname"> Acc No </th>
<th class="tdClassname"> Branch No </th>
<th class="tdClassname"> Tel </th>
</tr>
<tr> 
<td class="tdClassname"> Name 11 </td>
<td class="tdClassname"> Acc No 12 </td>
<td class="tdClassname"> Branch No 13 </td>
<td class="tdClassname"> 14</td>
</tr>
<tr> 
<td class="tdClassname"> Name 21 </td>
<td class="tdClassname"> Acc No 22 </td>
<td class="tdClassname"> Branch No 23 </td>
<td class="tdClassname"> 24 </td>
</tr>
<tr>
<td class="tdClassname"> Name 2,1 </td>
<td class="tdClassname"> Acc No 2,2 </td>
<td class="tdClassname"> Branch No 2,3 </td>
<td class="tdClassname"> 2,4 </td>
</tr>
<tr>
<td class="tdClassname"> 4,1 </td>
<td class="tdClassname"> 4,2 </td>
<td class="tdClassname"> 4,3 </td>
<td class="tdClassname"> 4,4 </td>
</tr>
</table>
<br>
<p>Enter values the from table to seach </p><br>
Col 1 text: <input type="text" placeholder="enter text to search" id="txtBoxId1"> &nbsp;&nbsp;
Col 2 text: <input type="text" placeholder="enter text to search" id="txtBoxId2"> &nbsp;&nbsp;
<input type="button" value="search" onClick="search()">

 <script>
 function search(){
   var txt1;
   var txt2;
var inputval_1 = document.getElementById("txtBoxId1").value;
var inputval_2 = document.getElementById("txtBoxId2").value;

 inputval_1 = inputval_1.replace(/ {1,}/g,"").trim();
inputval_2 = inputval_2.replace(/ {1,}/g,"").trim();

console.log(inputval_1);
console.log(inputval_2);

var table = document.getElementById("tabId1");
for (var r = 0, n = table.rows.length; r < n; r++) {

/* uncomment following if want to loop trough each cell in the row */

/* for (var c = 0, m = table.rows[r].cells.length; c < m; c++) {
alert(table.rows[r].cells[c].innerHTML);
} */

txt1 = table.rows[r].cells[0].innerHTML; /* Column 1 text */
txt2 = table.rows[r].cells[1].innerHTML; /* Column 2 text */

 txt1 = txt1.replace(/ {1,}/g,"").trim()
txt2 = txt2.replace(/ {1,}/g,"").trim()

console.log(txt1+" "+txt2)

if(inputval_1 == txt1){
console.log("Column 1 text matched :: "+txt1+" == "+inputval_1);
}
if(inputval_2 == txt2){
console.log("Column 2 text matched :: "+txt2+" == "+inputval_2);
}

   }

 }


</script>
</body>
</html>

Comments

Post a Comment

Popular posts from this blog

How to Calculate HTML5 Video Height and Width dynamically to fit web page.

While developing the web pages with inline HTML5 videos we often need to adjust the video width or height according the available space on the web page.  Here is the solution to find that required height and width keeping the same aspect ratio of the video.  You may go ahead and set video CSS property to  width: 100% and height: auto but this will not give you any idea about how much height the video is going to take on the web page. Then the better approach would be setting the video height or width using Javascript. So, sometimes to adjust the width according to available height on the web page, it require to calculate the NEW WIDTH which you can set to your video as per available height. The same goes with Height as well. So here are the solutions to solve this problem. Here I am assuming the video is having 16:9 ratio, which would be a HD video with 1920px width and 1080px height. Now suppose I want my video to fit in the width of 1280px, then...
Post a Comment
Read more

Most importment JavaScript frameworks & libraries for frontend development

Here is a list of top Most importment JavaScript frameworks & libraries for frontend development . 1. Jquery You can directly use jQuery library if your requirement is to deal with browser's DOM. jQuery has been a reliable, easy to use and handy library for frontend developers. You can trust on it's cross browser & legacy support. Along with simple jQuery.js, adding the jQuery UI provides you more features for adding different kind of interactivity on your webpage. 2. Angular Since 2016, Angular is becoming a most popular framework for clien-side development. Angular.js is the initial base of Angular (released in 2010) which was completely written in JavaScript. In 2016, Google released the next version of Angular.js as Angular 2.0 (not .js). Angular 2.0 and above versions uses Typescript as a language to write code. Angular added a new way to develop client-side SPA applications. If you want to build a Single Page Application, if you want a most secured application...
Post a Comment
Read more