Template:File Summary: Difference between revisions
Created page with "<html> <head> <style> table { border: 1px solid #aaa; background-color: #f9f9f9; border-collapse: collapse; width: 100%; font-size: 90%; margin-bottom: 1em; } th { background-color: #e6e6e6; border-bottom: 1px solid #aaa; text-align: left; padding: 5px 10px; } td { padding: 5px 10px; border-bottom: 1px solid #ddd; } </style> </head> <body> <table id="dynamicTable"> <..." |
No edit summary Tag: Reverted |
||
| Line 2: | Line 2: | ||
<head> | <head> | ||
<style> | <style> | ||
.infobox { | |||
border: 1px solid #aaa; | border: 1px solid #aaa; | ||
background-color: #f9f9f9; | background-color: #f9f9f9; | ||
border-collapse: collapse; | border-collapse: collapse; | ||
width: | width: 300px; /* Adjust width for infobox */ | ||
font-size: 90%; | font-size: 90%; | ||
margin | margin: 1em 0; | ||
float: right; /* Align to the right like a typical infobox */ | |||
} | } | ||
th { | .infobox th { | ||
background-color: #e6e6e6; | background-color: #e6e6e6; | ||
border-bottom: 1px solid #aaa; | border-bottom: 1px solid #aaa; | ||
| Line 16: | Line 17: | ||
padding: 5px 10px; | padding: 5px 10px; | ||
} | } | ||
td { | .infobox td { | ||
padding: 5px 10px; | padding: 5px 10px; | ||
border-bottom: 1px solid #ddd; | border-bottom: 1px solid #ddd; | ||
| Line 23: | Line 24: | ||
</head> | </head> | ||
<body> | <body> | ||
<table id=" | <!-- Infobox Container --> | ||
<table class="infobox" id="dynamicInfobox"> | |||
<tr> | <tr> | ||
<th colspan="2"> | <th colspan="2">Infobox Title</th> <!-- Replace with dynamic title if needed --> | ||
</tr> | </tr> | ||
</table> | </table> | ||
<script> | <script> | ||
// | // Infobox data (Add only fields you want to display) | ||
const | const infoboxData = { | ||
Description: "Custom description for Bhikitia", | Description: "Custom description for Bhikitia", | ||
Date: "16 September 2023", | Date: "16 September 2023", | ||
Source: "Own work", | Source: "Own work", | ||
Author: "Chabe01", | Author: "Chabe01", | ||
Location: "48° 53′ 25.22″ N, 2° 15′ 07.72″ E", | |||
"Custom Field 1": "Special Value", | |||
"Custom Field 2": "" // Empty fields will not appear | |||
}; | }; | ||
// | // Dynamic rendering | ||
const | const infobox = document.getElementById("dynamicInfobox"); | ||
for (const [key, value] of Object.entries( | for (const [key, value] of Object.entries(infoboxData)) { | ||
if (value) { // Only include rows where | if (value) { // Only include rows where value is not empty | ||
const row = document.createElement("tr"); | const row = document.createElement("tr"); | ||
const cellKey = document.createElement("td"); | const cellKey = document.createElement("td"); | ||
| Line 50: | Line 55: | ||
row.appendChild(cellKey); | row.appendChild(cellKey); | ||
row.appendChild(cellValue); | row.appendChild(cellValue); | ||
infobox.appendChild(row); | |||
} | } | ||
} | } | ||
Revision as of 23:12, 3 December 2024
| Infobox Title |
|---|