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

how to append html form data in html table using javascript in hindi ?

Tech Gyan Amit अक्टूबर 27, 2024

  

How to append html form data in html table using javascript in hindi


दोस्तों आज की आर्टिकल में मैं आपको बताऊंगा कि आप कैसे (how to append html form data in html table using javascript in hindi ?) HTML CSS और JAVSCRIPT  की मदद से कैसे आप अपनी HTML फॉर्म की डाटा को अपने HTML टेबल में इंसर्ट करा सकते हैं |



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="parent">
        <div class="first">
            <form id="dataForm">
                <label for="name">Name:</label>
                <input type="text" id="name" placeholder="Enter your name">

                <label for="age">Age:</label>   
                <input type="number" id="age" placeholder="Enter your age">

                <label for="email">Email:</label>
                <input type="email" id="email" placeholder="Enter your email">

                <label for="gender">Gender:</label>
                <select id="gender">
                    <option value="" disabled selected>Choose Your Gender</option>
                    <option value="male">Male</option>  
                    <option value="female">Female</option>
                    <option value="other">Other</option>
                </select>

                <label for="city">City:</label> 
                <select id="city">
                    <option value="" disabled selected>Choose Your City</option>
                    <option value="delhi">Delhi</option>
                    <option value="mumbai">Mumbai</option>
                    <option value="chennai">Chennai</option>
                    <option value="kolkata">Kolkata</option>    
                </select>
                <button type="submit">Submit</button>
            </form>
        </div>
        <div class="second">
            <table id="datatable">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Age</th>
                        <th>Email</th>
                        <th>Gender</th>
                        <th>City</th>
                    </tr>
                </thead>
                <tbody>

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






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

.parent{
    width: 100vw;
    display: flex;
    justify-content: space-around;
}

body {
    font-family: Arial, sans-serif;
    margin: 20px;
    background-color: #f4f4f4;
}



.first {
    width: 30%;
    margin: 0 auto;
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}



form {
    display: flex;
    flex-direction: column;
}

label {
    margin-top: 10px;
    font-weight: bold;
}

input, select, button {
    padding: 10px;
    margin-top: 5px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
}

button {
    background-color: #28a745;
    color: white;
    cursor: pointer;
}

button:hover {
    background-color: #218838;
}

.second {
    width: 55%;
    margin: 0 auto;
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

table {
    width: 100%;
    margin: 20px auto;
    border-collapse: collapse;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

th, td {
    padding: 12px 15px;
    border: 1px solid #ddd;
    text-align: center;
}

th {
    background-color: #007bff;
    color: white;
}

tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

tbody tr:hover {
    background-color: #f1f1f1;
}


let form = document.getElementById('dataForm');
let table = document.getElementById('datatable');

form.addEventListener('submit', function(event) {
    event.preventDefault();
    let name = document.getElementById("name").value;
    let age = document.getElementById("age").value;
    let email = document.getElementById("email").value;
    let gender = document.getElementById("gender").value;   
    let city = document.getElementById("city").value;
    let newRow = table.insertRow();
    let column1 = newRow.insertCell(0);
    let column2 = newRow.insertCell(1);
    let column3 = newRow.insertCell(2);
    let column4 = newRow.insertCell(3);
    let column5 = newRow.insertCell(4);

    column1.innerHTML = name;
    column2.innerHTML = age;
    column3.innerHTML = email;
    column4.innerHTML = gender;
    column5.innerHTML = city;
    form.reset()
})
Tags
Reactions

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

0 टिप्पणियाँ

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