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