almost - PHP Online

Form of PHP Sandbox

Enter Your PHP code here for testing/debugging in the Online PHP Sandbox. As in the usual PHP files, you can also add HTML, but do not forget to add the tag <?php in the places where the PHP script should be executed.



Your result can be seen below.

Result of php executing





Full code of almost.php

  1. <button onclick="copyTemplate()">Copy Template</button>
  2.  
  3. <script>
  4. function copyTemplate() {
  5.   // Get the template element (which contains the table and associated elements and functions)
  6.   var template = document.getElementById("template");
  7.  
  8.   // Clone the template element and its contents
  9.   var copiedTemplate = template.cloneNode(true);
  10.  
  11.   // Give the cloned template element a unique id
  12.   copiedTemplate.id = "copiedTemplate";
  13.  
  14.   // Clear the user input fields in the copied template
  15.   // Only clear the fillable and content editable fields, not the orange bar field
  16.   var inputElements = copiedTemplate.querySelectorAll(".field");
  17.   var contentEditable = copiedTemplate.querySelector("#contenteditable");
  18.   var fillableArea = copiedTemplate.querySelector("#fillableArea");
  19.   var editableContent1 = copiedTemplate.querySelector("#editableContent1");
  20.   var editableContent2 = copiedTemplate.querySelector("#editableContent2");
  21.   for (var i = 0; i < inputElements.length; i++) {
  22.     inputElements[i].value = "";
  23.   }
  24.   contentEditable.innerHTML = "";
  25.   fillableArea.innerHTML = "";
  26.   editableContent1.innerHTML = "";
  27.   editableContent2.innerHTML = "";
  28.  
  29.   // Append the cloned template element to the document body
  30.   document.body.appendChild(copiedTemplate);
  31.  
  32.   // Get the table element from the copied template
  33.   var table = copiedTemplate.querySelector("table");
  34.  
  35.   // Give the table a unique id
  36.   table.id = "copiedTable";
  37.  
  38.   // Create a new element to hold the "add row" button and its associated function
  39.   /*
  40.   var addRowButtonContainer = document.createElement("div");
  41.  
  42.   // Add the "add row" button to the container element
  43.   
  44.   var addRowButton = document.createElement("button");
  45.   addRowButton.innerHTML = "Add Row";
  46.   addRowButton.onclick = function() {
  47.     // Add a new row to the table
  48.     var row = document.getElementById("copiedTable").insertRow(-1); 
  49.     var cell1 = row.insertCell(0);
  50.     var cell2 = row.insertCell(1);
  51.     var cell3 = row.insertCell(2);
  52.     cell1.innerHTML = "<input class='field' type='text' placeholder='Enter Filename' style='width: 430px'>";
  53.     cell2.innerHTML = "<input class='field' type='text' placeholder='Enter Graphic Description' style='width: 430px'>";
  54.     cell3.innerHTML = "<input class='field' type='text' placeholder='Enter Alt Text/Title Tag' style='width: 430px'>";
  55.   }
  56.  
  57.   // Append the button to the container element
  58.   addRowButtonContainer.appendChild(addRowButton);
  59.   
  60.   // Create a new element to hold the "toggle table" button and its associated function
  61.   var toggleTableButtonContainer = document.createElement("div");
  62.  
  63.   // Add the "toggle table" button to the container element
  64.   var toggleTableButton = document.createElement("button");
  65.   toggleTableButton.innerHTML = "Toggle Table";
  66.   toggleTableButton.onclick = function() {
  67.     // Toggle the display style of the table
  68.     var table = document.getElementById("copiedTable");
  69.     if (table.style.display === "none") {
  70.       table.style.display = "table";
  71.     } else {
  72.       table.style.display = "none";
  73.     }
  74.   }
  75.  
  76.   // Append the button to the container element
  77.   toggleTableButtonContainer.appendChild(toggleTableButton);
  78.  
  79.   // Append the button container elements to the copied template element
  80.   copiedTemplate.appendChild(addRowButtonContainer);
  81.   copiedTemplate.appendChild(toggleTableButtonContainer);
  82.   */
  83. }
  84. }
  85. </script>
  86.  
  87. <div id="template">
  88. </script>
  89.  
  90.  
  91.   
  92.     <style>
  93.       table {
  94.         width: 70%;
  95.       }
  96.     </style>
  97.     
  98. <table id="table1">
  99. <tr style="background-color: gray;">
  100.   <td>Page <input type="number"></td>
  101.   <td>Screen <input type="number"></td>
  102. </tr>
  103. <tr style="background-color: orange;">
  104.   <td colspan="2"><input type="text" style="width: 500px;">
  105.   </td>
  106.   </tr>
  107.   <tr>
  108.   <td colspan="2">
  109.   <div id="contenteditable" contenteditable=""></div>
  110.   </td>
  111.     </tr>
  112.     <tr>
  113.   <td colspan="2" style="text-align: center;">Select Navigate to Continue</td>
  114.  
  115. </tr>
  116. <tr style="background-color: gray;">
  117. <td colspan="2" style="text-align: center;">Navigation Bar</td>
  118. </tr>
  119.  
  120.  
  121. <table id="myTable" style="table-layout: fixed; resize: both;">
  122.   <tbody>
  123. <tr style="background-color: gray;">
  124. <th style="width: 430px">Filename</th>
  125. <th style="width: 430px">Graphic Description</th>
  126. <th style="width: 430px">Alt Text/Title Tag</th>
  127. </tr>
  128. <tr>
  129. <td><input class="field" type="text" placeholder="Enter Filename" style="width: 430px"></td>
  130. <td><input class="field" type="text" placeholder="Enter Graphic Description" style="width: 430px"></td>
  131. <td><input class="field" type="text" placeholder="Enter Alt Text/Title Tag" style="width: 430px"></td>
  132. </tr>
  133.  
  134.  
  135. <button onclick="addRow(this)">Add Row</button>
  136. <button onclick="toggleTable(this)">Toggle Table</button>
  137.  
  138. </tbody>
  139.  
  140. <script>
  141.  
  142. function addRow(e) {
  143.  
  144. var table = e.parentNode.querySelector("#myTable");
  145. console.log(table);
  146. var row = table.insertRow(-1); // Insert a new row at the end of the table
  147. var cell1 = row.insertCell(0);
  148. var cell2 = row.insertCell(1);
  149. var cell3 = row.insertCell(2);
  150. cell1.innerHTML = "<input class='field' type='text' placeholder='Enter Filename' style='width: 430px'>";
  151. cell2.innerHTML = "<input class='field' type='text' placeholder='Enter Graphic Description' style='width: 430px'>";
  152. cell3.innerHTML = "<input class='field' type='text' placeholder='Enter Alt Text/Title Tag' style='width: 430px'>";
  153. }
  154.  
  155. function toggleTable(e) {
  156. var fields = document.getElementsByClassName("field");
  157. var table = e.parentNode.querySelector("#myTable");
  158. console.log(table);
  159. // If the table is collapsed, expand it
  160. if (table.open === false) {
  161. for (var i = 0; i < fields.length; i++) {
  162. fields[i].style.display = "block";
  163. }
  164. table.open = true;
  165. } else {
  166. // Otherwise, collapse it
  167. for (var i = 0; i < fields.length; i++) {
  168. fields[i].style.display = "none";
  169. }
  170. table.open = false;
  171. }
  172. }
  173.  
  174. </script>
  175.  
  176.  
  177.  
  178. <table id="table3">
  179. <tbody>
  180. <tr style="background-color: gray;">
  181. <td>Programming</td>
  182. </tr>
  183. <tr>
  184. <td colspan="2"><textarea style="width:100%; height:100%;"></textarea></td>
  185.  
  186. </tr>
  187.  
  188.  
  189.  
  190. <table id="table4">
  191. <tbody>
  192. <tr style="background-color: lightblue;">
  193. <th>Narrated Text</th>
  194. <th>Graphics</th>
  195. </tr>
  196. <tr>
  197. <td style="width: 50%;">
  198.     <div id="contenteditable1" contenteditable1=""></div>
  199. <div contenteditable="true" class="editable-area"></div>
  200. </td>
  201. <td style="width: 20%;">
  202.     <div id="contenteditable2" contenteditable2=""></div>
  203. <div contenteditable="true" class="editable-area"></div>
  204. </td>
  205. </tr>
  206. <style>
  207. .editable-area {
  208. white-space: pre-line;
  209. overflow-wrap: break-word;
  210. min-height: 100px;
  211. max-height: 100px;
  212. resize: vertical;
  213. }
  214. </style>
  215. </tbody>
  216. </table>
  217. </div>
  218.  
File Description
  • almost
  • PHP Code
  • 19 Dec-2022
  • 6.4 Kb
You can Share it: