maybe maybe - 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 maybe maybe.php

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