-->
Home
Blogger
CSS Code

Table Filter with hidden row and column text Using html css Java code

Table Filter hidden row and column 

 नीचे दिए गए Example से  ब्लॉगर प्लेटफॉर्म पर या किसी भी ब्लॉग पर HTML CSS एवं Java Script कोड के सहायता से Table Filter जैसे पोस्ट या पेज को Create कर सकते है जिसमे इनपुट एरिया तथा Table की Heading दिखेगा बाकि सारे Row और कॉलम हाईड रहेंगे 

Table Filter with hidden row and column HTML CSS Code with Demo

Table Filter hidden row and column CSS Code


#myTable {
    border-collapse: collapse;
    width: 100%;
    font-family: Verdana,sans-serif;
}
#myTable td, #myTable th {
    border: 1px solid #ddd;
    padding: 8px;
    text-align:center;
    font-size:1vw;
    color:#000;
    }
#myInput {
    display: block;
    width: 100%;
    border: 1px solid rgba(230,230,230,1);
    border-radius: 2px;
    outline: 0;
    padding: 15px 15px;
    margin-bottom: 15px;
}

Table Filter hidden row and column HTML Code


<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Enter name..(Ex.-Ramu,Shyam, Ghanshyam)" title="Type in a name">

उपरोक्त HTML Code में Input Area को customize करे

Table Filter hidden row and column HTML Code


<table id="myTable">
 <thead>
<tbody>
<tr>
<td>S.No.</td>
<td>Name</td>
<td>Hindi</td>
<td>English</td>
<td>Math</td>
<td>Science</td>
<td>Social Science</td>
<td>Art</td>
</tr>
 </tbody>
 </thead>
<tr>
<td>1</td>
<td>Ramu</td>
<td>45</td>
<td>45</td>
<td>45</td>
<td>45</td>
<td>45</td>
<td>45</td>
</tr>
<tr>
<td>2</td>
<td>Shyamu</td>
<td>43</td>
<td>43</td>
<td>43</td>
<td>43</td>
<td>43</td>
<td>43</td>
</tr>
<tr>
<td>3</td>
<td>Ghanshyam</td>
<td>48</td>
<td>48</td>
<td>48</td>
<td>48</td>
<td>48</td>
<td>48</td>
</tr>
<tr>
<td>4</td>
<td>Dherendra</td>
<td>45</td>
<td>45</td>
<td>45</td>
<td>45</td>
<td>45</td>
<td>45</td>
</tr>
<tr>
<td>5</td>
<td>Ravi Prakash</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>6</td>
<td>Golu</td>
<td>45</td>
<td>45</td>
<td>45</td>
<td>45</td>
<td>45</td>
<td>45</td>
</tr>
<tr>
<td>7</td>
<td>Govind</td>
<td>54</td>
<td>54</td>
<td>54</td>
<td>54</td>
<td>54</td>
<td>54</td>
</tr>
<tr>
<td>8</td>
<td>Abhay</td>
<td>56</td>
<td>56</td>
<td>56</td>
<td>56</td>
<td>56</td>
<td>56</td>
</tr>
<tr>
<td>9</td>
<td>Pankaj</td>
<td>58</td>
<td>58</td>
<td>58</td>
<td>58</td>
<td>58</td>
<td>58</td>
</tr>
<tr>
<td>10</td>
<td>Anushka</td>
<td>55</td>
<td>55</td>
<td>55</td>
<td>55</td>
<td>55</td>
<td>55</td>
</tr>
</tbody>
</table>

उपरोक्त HTML Code में Data Table को Edit करे

Table Filter hidden row and column JavaScript Code

document.addEventListener('DOMContentLoaded', function () {
    ContactsearchFX();
    document.getElementById('myInput').addEventListener('input', ContactsearchFX);
});


function ContactsearchFX() {
  var input, filter, table, tr, td, th, i;    
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.rows;
  for (i = 1; i < tr.length; i++) {
    td = tr[i].cells[1];
    if (td) {
      tr[i].style.display = filter && td.textContent.toUpperCase().indexOf(filter) > -1
        ? "" : "none";
       
    }
  }
}

Edit and Copy Table Filter hidden row and column Source Code

Result

Table Filter hidden row and column Demo

Post a Comment