API tools faq
paste
Advertisement
Sourabh_5050

WTL lab5

Sourabh_5050
Sep 5th, 2023
84
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5.22 KB | Source Code | 0 0
raw download clone embed print report
  1. lab
  2. 5a) Append row to table
  3. <!DOCTYPE html>
  4. <html lang="en">
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Append Row to Table</title>
  9. </head>
  10. <body>
  11.     <h1>Append Row to Table</h1>
  12.    
  13.     <!-- Table with an initial row -->
  14.     <table id="myTable">
  15.         <tr>
  16.             <td>Row 1, Cell 1</td>
  17.             <td>Row 1, Cell 2</td>
  18.         </tr>
  19.     </table>
  20.    
  21.     <!-- Button to append a row -->
  22.     <button onclick="appendRow()">Add Row</button>
  23.  
  24.     <script>
  25.         function appendRow() {
  26.             // Get a reference to the table
  27.             var table = document.getElementById("myTable");
  28.  
  29.             // Create a new row and cells
  30.             var newRow = table.insertRow();
  31.  
  32.             // Create two cells for the new row
  33.             var cell1 = newRow.insertCell(0);
  34.             var cell2 = newRow.insertCell(1);
  35.  
  36.             // Add content to the cells (you can customize this)
  37.             cell1.innerHTML = "New Row, Cell 1";
  38.             cell2.innerHTML = "New Row, Cell 2";
  39.         }
  40.     </script>
  41. </body>
  42. </html>
  43.  
  44. 5b) append anchor tag and link
  45. <!DOCTYPE html>
  46. <html lang="en">
  47. <head>
  48.     <meta charset="UTF-8">
  49.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  50.     <title>Append Anchor Tag</title>
  51. </head>
  52. <body>
  53.     <h1>Append Anchor Tag</h1>
  54.    
  55.     <!-- Button to append the anchor tag -->
  56.     <button onclick="appendAnchor()">Add Anchor Tag</button>
  57.  
  58.     <!-- Container for the anchor tag -->
  59.     <div id="anchorContainer"></div>
  60.  
  61.     <script>
  62.         function appendAnchor() {
  63.             // Get a reference to the container
  64.             var container = document.getElementById("anchorContainer");
  65.  
  66.             // Create an anchor tag
  67.             var anchorTag = document.createElement("a");
  68.  
  69.             // Set the href attribute to the URL of the page you want to redirect to
  70.             anchorTag.href = "https://example.com"; // Replace with your desired URL
  71.  
  72.             // Set the anchor text
  73.             anchorTag.textContent = "Click me to go to the new page";
  74.  
  75.             // Append the anchor tag to the container
  76.             container.appendChild(anchorTag);
  77.         }
  78.     </script>
  79. </body>
  80. </html>
  81.  
  82. 5c1) color changing with mouse over
  83. <!DOCTYPE html>
  84. <html lang="en">
  85. <head>
  86.     <meta charset="UTF-8">
  87.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  88.     <title>Button Color Change</title>
  89. </head>
  90. <body>
  91.     <h1>Change Button Color on Hover</h1>
  92.    
  93.     <!-- Button to change color on mouseover -->
  94.     <button id="myButton" onmouseover="changeColor()">Hover over me</button>
  95.  
  96.     <script>
  97.         function changeColor() {
  98.             // Get a reference to the button element
  99.             var button = document.getElementById("myButton");
  100.  
  101.             // Change the button's background color on mouseover
  102.             button.style.backgroundColor = "blue"; // Change to your desired color
  103.         }
  104.     </script>
  105. </body>
  106. </html>
  107.  
  108. 5c2) change color button on hover
  109. <!DOCTYPE html>
  110. <html lang="en">
  111. <head>
  112.     <meta charset="UTF-8">
  113.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  114.     <title>Button Color Change on Hover</title>
  115. </head>
  116. <body>
  117.     <h1>Change Button Color on Hover</h1>
  118.  
  119.     <!-- Button to change color on mouseover and revert on mouseout -->
  120.     <button id="myButton" onmouseover="changeColor(this, 'blue')" onmouseout="changeColor(this, 'red')">Hover over me</button>
  121.  
  122.     <script>
  123.         function changeColor(element, newColor) {
  124.             // Change the button's background color
  125.             element.style.backgroundColor = newColor;
  126.         }
  127.     </script>
  128. </body>
  129. </html>
  130.  
  131. 5c3) change color button on click
  132. <!DOCTYPE html>
  133. <html lang="en">
  134. <head>
  135.     <meta charset="UTF-8">
  136.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  137.     <title>Button Color Change on Click</title>
  138. </head>
  139. <body>
  140.     <h1>Change Button Color on Click</h1>
  141.  
  142.     <!-- Button to change color on click -->
  143.     <button id="myButton" onclick="changeColor()">Click me</button>
  144.  
  145.     <script>
  146.         function changeColor() {
  147.             // Get a reference to the button element
  148.             var button = document.getElementById("myButton");
  149.  
  150.             // Change the button's background color
  151.             button.style.backgroundColor = "blue"; // Change to your desired color
  152.         }
  153.     </script>
  154. </body>
  155. </html>
  156.  
  157. 5d) change colour background with dropdown
  158. <!DOCTYPE html>
  159. <html lang="en">
  160. <head>
  161.     <meta charset="UTF-8">
  162.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  163.     <title>Button Color Change on Click</title>
  164. </head>
  165. <body>
  166.     <h1>Change Button Color on Click</h1>
  167.  
  168.     <!-- Button to change color on click -->
  169.     <button id="myButton" onclick="changeColor()">Click me</button>
  170.  
  171.     <script>
  172.         function changeColor() {
  173.             // Get a reference to the button element
  174.             var button = document.getElementById("myButton");
  175.  
  176.             // Change the button's background color
  177.             button.style.backgroundColor = "blue"; // Change to your desired color
  178.         }
  179.     </script>
  180. </body>
  181. </html>
  182.  
  183.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!