จำนวนคนเข้าดู: 161

Workshop สร้างแบบฟอร์มรับข้อมูลพนักงาน Array of Employee

ตัวอย่างรูปภาพ

code สามารถตั้งเป็นไฟล์ .html รันได้เลยครับ

<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>แบบฟอร์มรับข้อมูลพนักงาน</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f4f4f4;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
    }

    h1, h2 {
      color: #333;
      text-align: center;
    }

    form {
      background-color: #fff;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      max-width: 400px;
      width: 100%;
      margin: 20px;
    }

    label {
      display: block;
      margin-bottom: 8px;
    }

    input {
      width: 100%;
      padding: 8px;
      margin-bottom: 12px;
      box-sizing: border-box;
      border: 1px solid #ccc;
      border-radius: 4px;
    }

    button {
      background-color: #4caf50;
      color: #fff;
      padding: 10px 15px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }

    button:hover {
      background-color: #45a049;
    }

    table {
      margin-top: 20px;
      border-collapse: collapse;
      width: 50%;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      border-radius: 8px;
      overflow: hidden;
    }

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

    th {
      background-color: #4caf50;
      color: #fff;
    }

    tbody tr:hover {
      background-color: #f5f5f5;
    }
  </style>
</head>
<body>
  <h1>ข้อมูลพนักงาน</h1>
  <form onsubmit="addData(event)">
    <label for="name">ชื่อ:</label>
    <input type="text" id="name" name="name" required>

    <label for="age">อายุ:</label>
    <input type="number" id="age" name="age" required>

    <label for="position">ตำแหน่ง:</label>
    <input type="text" id="position" name="position" required>

    <button type="submit">บันทึกข้อมูล</button>
  </form>

  <h2>รายชื่อพนักงาน</h2>
  <table id="employee-table">
    <thead>
      <tr>
        <th>ชื่อ</th>
        <th>อายุ</th>
        <th>ตำแหน่ง</th>
      </tr>
    </thead>
    <tbody id="employee-list"></tbody>
  </table>

  <script>
    // Your JavaScript code remains unchanged
    let employees = [];
    class Employee {
      constructor(name, age, position) {
        this.name = name;
        this.age = age;
        this.position = position;
      }
    }

    function addData(event) {
      event.preventDefault();

      const name = document.getElementById("name").value;
      const age = parseInt(document.getElementById("age").value);
      const position = document.getElementById("position").value;

      const employee = new Employee(name, age, position);
      employees.push(employee);

      const employeeList = document.getElementById("employee-list");
      const newEmployeeRow = `
        <tr>
          <td>${employee.name}</td>
          <td>${employee.age}</td>
          <td>${employee.position}</td>
        </tr>
      `;
      employeeList.innerHTML += newEmployeeRow;
      document.getElementById("name").value = "";
      document.getElementById("age").value = "";
      document.getElementById("position").value = "";
    }
  </script>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

<!DOCTYPE html>

<head>

<title>แบบฟอร์มรับข้อมูลพนักงาน</title>

<style>

body {

font-family: Arial, sans-serif;

background-color: #f4f4f4;

margin: 0;

padding: 0;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

height: 100vh;

}

h1, h2 {

color: #333;

text-align: center;

}

form {

background-color: #fff;

padding: 20px;

border-radius: 8px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

max-width: 400px;

width: 100%;

margin: 20px;

}

label {

display: block;

margin-bottom: 8px;

}

input {

width: 100%;

padding: 8px;

margin-bottom: 12px;

box-sizing: border-box;

border: 1px solid #ccc;

border-radius: 4px;

}

button {

background-color: #4caf50;

color: #fff;

padding: 10px 15px;

border: none;

border-radius: 4px;

cursor: pointer;

}

button:hover {

background-color: #45a049;

}

table {

margin-top: 20px;

border-collapse: collapse;

width: 50%;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

border-radius: 8px;

overflow: hidden;

}

th, td {

border: 1px solid #ddd;

padding: 12px;

text-align: center;

}

th {

background-color: #4caf50;

color: #fff;

}

tbody tr:hover {

background-color: #f5f5f5;

}

</style>

</head>

<body>

<h1>ข้อมูลพนักงาน</h1>

<label for="position">ตำแหน่ง:</label>

<button type="submit">บันทึกข้อมูล</button>

</form>

<h2>รายชื่อพนักงาน</h2>

<thead>

<tr>

<th>ตำแหน่ง</th>

</tr>

</thead>

</table>

// Your JavaScript code remains unchanged

let employees = [];

class Employee {

constructor(name, age, position) {

this.name = name;

this.age = age;

this.position = position;

}

function addData(event) {

event.preventDefault();

const name = document.getElementById("name").value;

const age = parseInt(document.getElementById("age").value);

const position = document.getElementById("position").value;

const employee = new Employee(name, age, position);

employees.push(employee);

const employeeList = document.getElementById("employee-list");

const newEmployeeRow = `

<tr>

<td>${employee.name}</td>

<td>${employee.age}</td>

<td>${employee.position}</td>

</tr>

employeeList.innerHTML += newEmployeeRow;

document.getElementById("name").value = "";

document.getElementById("age").value = "";

document.getElementById("position").value = "";

}

</script>

</body>

</html>

วัยวุฒิ ชุมเมืองปัก

สนใจจ้างพัฒนาระบบ เขียนระบบ
ทำเว็บไซต์ รับสอนเขียนโปรแกรม
inbox มาที่เพจ หรือติดต่อ 098-373-8651

ช่องทางการชำระเงิน
เงินสด หรือ e-banking
ธนาคารกสิกรไทย
เลขบัญชี : 0951168564
ชื่อบัญชี : นายวัยวุฒิ ชุมเมืองปัก

Array JavaScript

วัยวุฒิ ชุมเมืองปัก

สนใจจ้างพัฒนาระบบ เขียนระบบ ทำเว็บไซต์ รับสอนเขียนโปรแกรม inbox มาที่เพจ หรือติดต่อ 098-373-8651 ช่องทางการชำระเงิน เงินสด หรือ e-banking ธนาคารกสิกรไทย เลขบัญชี : 0951168564 ชื่อบัญชี : นายวัยวุฒิ ชุมเมืองปัก

Code สร้างแบบฟอร์มรับข้อมูลพนักงาน Array of Employee object [JavaScript]

Workshop สร้างแบบฟอร์มรับข้อมูลพนักงาน Array of Employee

Related

วัยวุฒิ ชุมเมืองปัก

Workshop สร้างแบบฟอร์มรับข้อมูลพนักงาน Array of Employee

Share this:

Related

วัยวุฒิ ชุมเมืองปัก