> How to filter multiple html column using javascript in hindi ?
एक्सेल और एडवांस एक्सेल से जुड़े सभी लेटेस्ट विडियो पाने के लिए मेरे यूट्यूब चैनल को अभी सबस्क्राइब करे लिंक नीचे है धन्यवाद |

How to filter multiple html column using javascript in hindi ?

Tech Gyan Amit नवंबर 24, 2024


 How to filter multiple html column using Javascript in hindi ?


दोस्तों आज के इस आर्टिकल में मै आपको बताउगा की आप किस तरीके से html (How to filter multiple html column using javascript in hindi )टेबल के मल्टीप्ल कॉलम को javascript की मदद से फ़िल्टर कर सकते है  |





html code 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    
    <div class="container">
        <div class="search-input">
            <input type="text" id="search" placeholder="Enter Name to search.." autocomplete="off">
        </div>
        
        <table border="1" cellspacing="0">
            <thead>
                <tr>
                    <th>Item Name</th>
                    <th>Seller Name</th>
                    <th>City</th>
                    <th>Product Code</th>
                    <th>Item Qty</th>
                    <th>Rate</th>
                </tr>
            </thead>
            <tbody>
                <!-- Sample data rows -->
                <tr>
                    <td>Apple</td>
                    <td>Seller A</td>
                    <td>City X</td>
                    <td>P001</td>
                    <td>10</td>
                    <td>$20</td>
                </tr>
                <tr>
                    <td>Litchi</td>
                    <td>Seller B</td>
                    <td>City Y</td>
                    <td>P002</td>
                    <td>15</td>
                    <td>$25</td>
                </tr>
                <tr>
                    <td>Banana</td>
                    <td>Seller C</td>
                    <td>City Z</td>
                    <td>P003</td>
                    <td>20</td>
                    <td>$30</td>
                </tr>
                <tr>
                    <td>Guava</td>
                    <td>Seller D</td>
                    <td>City X</td>
                    <td>P004</td>
                    <td>25</td>
                    <td>$35</td>
                </tr>
                <tr>
                    <td>Lemon</td>
                    <td>Seller E</td>
                    <td>City Y</td>
                    <td>P005</td>
                    <td>30</td>
                    <td>$40</td>
                </tr>
                <tr>
                    <td>Kiwi</td>
                    <td>Seller F</td>
                    <td>City Z</td>
                    <td>P006</td>
                    <td>35</td>
                    <td>$45</td>
                </tr>
                
                <tr>
                    <td>Jackfruit</td>
                    <td>Seller R</td>
                    <td>City Z</td>
                    <td>P018</td>
                    <td>95</td>
                    <td>$105</td>
                </tr>
                <tr>
                    <td>Oniion</td>
                    <td>Seller S</td>
                    <td>City X</td>
                    <td>P019</td>
                    <td>100</td>
                    <td>$110</td>
                </tr>
                <tr>
                    <td>Lemon</td>
                    <td>Seller T</td>
                    <td>City Y</td>
                    <td>P020</td>
                    <td>105</td>
                    <td>$115</td>
                </tr>
            </tbody>
        </table>
    </div>

    <script src="java.js"></script>
</body>
</html>



*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.container{
  width: 100vw;
  height: 100vh;
  
}

.container table{
    width: 35vw;
    margin: 0 auto;
}

.container table tr th{
    padding: 5px;
    text-transform: uppercase;
    text-align: center;
    background-color: blueviolet;
    color: #fff;
    font-size: 1vw;
}

.search-input {
    
   display: flex;
   justify-content: center;
   align-items: center;
   margin-bottom: 20px;
}

.search-input input {
    padding: 5px;
    width: 20vw;
    font-size: 1vw;
    border: 2px solid #ccc;
    border-radius: 5px;
    margin-right: 10px;
    outline: none;
}

.container table tr td{
    padding: 5px;
    text-align: center;
    font-size: 1vw;
}



document.getElementById("search")
.addEventListener("input", function() {
    let searchValue = this.value.toLowerCase();
   let table = document.querySelector("table tbody")
   let rows = table.querySelectorAll("tr")
   for(var j =0; j < rows.length; j++) {
            let itemname = rows[j].cells[0].innerText.toLowerCase();
            let productCode = rows[j].cells[3].innerText.toLowerCase();

            if(itemname.includes(searchValue) || productCode.includes(searchValue)) {
                rows[j].style.display = "";
            }else{
                rows[j].style.display = "none";
            }
   } 
})
Tags
Reactions

एक टिप्पणी भेजें

0 टिप्पणियाँ

Thanks For Message Me if any issue please feel free to contact