fork download
copy 
  1. <!DOCTYPE html><html lang="th">
  2. <head>
  3.   <meta charset="UTF-8" />
  4.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  5.   <title>Document Tracker</title>
  6.   <script defer>
  7.     let documents = [];function renderTable() {
  8.   const tableBody = document.getElementById("doc-table-body");
  9.   tableBody.innerHTML = "";
  10.   documents.forEach((doc, index) => {
  11.     tableBody.innerHTML += `
  12.       <tr>
  13.         <td>${doc.code}</td>
  14.         <td>${doc.title}</td>
  15.         <td>${doc.holder}</td>
  16.         <td>${doc.location}</td>
  17.         <td>${doc.note}</td>
  18.         <td><button onclick="editDoc(${index})">แก้ไข</button></td>
  19.       </tr>
  20.     `;
  21.   });
  22. }
  23.  
  24. function addDocument(event) {
  25.   event.preventDefault();
  26.   const form = event.target;
  27.   const newDoc = {
  28.     code: form.code.value,
  29.     title: form.title.value,
  30.     holder: form.holder.value,
  31.     location: form.location.value,
  32.     note: form.note.value,
  33.   };
  34.   const index = form.index.value;
  35.   if (index === "") {
  36.     documents.push(newDoc);
  37.   } else {
  38.     documents[index] = newDoc;
  39.   }
  40.   form.reset();
  41.   form.index.value = "";
  42.   renderTable();
  43. }
  44.  
  45. function editDoc(index) {
  46.   const doc = documents[index];
  47.   const form = document.getElementById("doc-form");
  48.   form.index.value = index;
  49.   form.code.value = doc.code;
  50.   form.title.value = doc.title;
  51.   form.holder.value = doc.holder;
  52.   form.location.value = doc.location;
  53.   form.note.value = doc.note;
  54.   window.scrollTo(0, 0);
  55. }
  56.  
  57.   </script>
  58.   <style>
  59.     body { font-family: sans-serif; padding: 1rem; max-width: 600px; margin: auto; }
  60.     input, button, textarea { width: 100%; padding: 0.5rem; margin-top: 0.25rem; margin-bottom: 0.75rem; }
  61.     table { width: 100%; border-collapse: collapse; margin-top: 2rem; }
  62.     th, td { border: 1px solid #ccc; padding: 0.5rem; text-align: left; }
  63.     button { cursor: pointer; background: #4CAF50; color: white; border: none; }
  64.     button:hover { background: #45a049; }
  65.   </style>
  66. </head>
  67. <body>
  68.   <h1>ระบบติดตามเอกสาร</h1>
  69.   <form id="doc-form" onsubmit="addDocument
Success #stdin #stdout 0.03s 25448KB
comments (?)
stdin
copy 
Standard input is empty
stdout
copy 
<!DOCTYPE html><html lang="th">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document Tracker</title>
  <script defer>
    let documents = [];function renderTable() {
  const tableBody = document.getElementById("doc-table-body");
  tableBody.innerHTML = "";
  documents.forEach((doc, index) => {
    tableBody.innerHTML += `
      <tr>
        <td>${doc.code}</td>
        <td>${doc.title}</td>
        <td>${doc.holder}</td>
        <td>${doc.location}</td>
        <td>${doc.note}</td>
        <td><button onclick="editDoc(${index})">แก้ไข</button></td>
      </tr>
    `;
  });
}

function addDocument(event) {
  event.preventDefault();
  const form = event.target;
  const newDoc = {
    code: form.code.value,
    title: form.title.value,
    holder: form.holder.value,
    location: form.location.value,
    note: form.note.value,
  };
  const index = form.index.value;
  if (index === "") {
    documents.push(newDoc);
  } else {
    documents[index] = newDoc;
  }
  form.reset();
  form.index.value = "";
  renderTable();
}

function editDoc(index) {
  const doc = documents[index];
  const form = document.getElementById("doc-form");
  form.index.value = index;
  form.code.value = doc.code;
  form.title.value = doc.title;
  form.holder.value = doc.holder;
  form.location.value = doc.location;
  form.note.value = doc.note;
  window.scrollTo(0, 0);
}

  </script>
  <style>
    body { font-family: sans-serif; padding: 1rem; max-width: 600px; margin: auto; }
    input, button, textarea { width: 100%; padding: 0.5rem; margin-top: 0.25rem; margin-bottom: 0.75rem; }
    table { width: 100%; border-collapse: collapse; margin-top: 2rem; }
    th, td { border: 1px solid #ccc; padding: 0.5rem; text-align: left; }
    button { cursor: pointer; background: #4CAF50; color: white; border: none; }
    button:hover { background: #45a049; }
  </style>
</head>
<body>
  <h1>ระบบติดตามเอกสาร</h1>
  <form id="doc-form" onsubmit="addDocument
https://ideone.com/9cceyx
language:
PHP (php 7.3.5)
created:
188 days ago
visibility:
public

Share or Embed source code

Discover > Sphere Engine API

The brand new service which powers Ideone!

Discover > IDE Widget

Widget for compiling and running the source code in a web browser!