Can we add html folder and html class inside etc/clientlibs | Community
Skip to main content
This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

1 reply

M
MunmunBoAuthor
Level 3
September 28, 2023

HTML code :

<table id="data-table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody id="table-body">
<!-- Data will be inserted here -->
</tbody>
</table>

 

Javascript code:

function fetchDataAndPopulateTable() {
const apiUrl = 'https://api.example.com/data'; // Replace with your API endpoint

fetch(apiUrl)
.then((response) => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then((data) => {
const tableBody = document.getElementById('table-body');
tableBody.innerHTML = ''; // Clear existing table rows

data.forEach((item) => {
const row = document.createElement('tr');
row.innerHTML = `
<td>${item.id}</td>
<td>${item.name}</td>
<td>${item.email}</td>
`;
tableBody.appendChild(row);
});
})
.catch((error) => {
console.error('There was a problem with the fetch operation:', error);
});
}

// Call the function to fetch data and populate the table
fetchDataAndPopulateTable();

    Pulkit_Jain_
    Adobe Employee
    Pulkit_Jain_Adobe Employee
    Adobe Employee
    September 28, 2023

    @munmunbo 

    Why do you want to add the HTML to the Clientlib?

    Clientlib is supposed to honor JS and CSS files

      M
      MunmunBoAuthor
      Level 3
      September 28, 2023

      I am getting error as syntax error while clicking on button to add rules but it table is being displayed in main screen as i have not added only show in case of button thats okay but the code must not throw error incase of button click for edit rules is there any other way to display headers in js 

      function createTable(headers, data) {
      const table = document.createElement("table");

      // Create the table header
      const thead = table.createTHead();
      const headerRow = thead.insertRow();

      headers.forEach((headerText) => {
      const th = document.createElement("th");
      th.textContent = headerText;
      headerRow.appendChild(th);
      });

      // Create the table body
      const tbody = table.createTBody();

      data.forEach((item) => {
      const row = tbody.insertRow();

      // Add data cells to the row
      Object.values(item).forEach((value) => {
      const cell = row.insertCell();
      cell.textContent = value;
      });

      // Add an "Edit" button to the row
      const editButtonCell = row.insertCell();
      const editButton = document.createElement("button");
      editButton.textContent = "Edit";
      editButton.addEventListener("click", () => {
      console.log("Edit clicked for item:", item);
      // Handle the edit button click here
      // You can access the data for this row via the "item" variable
      });
      editButtonCell.appendChild(editButton);
      });

      return table;
      }

      // Define your headers and data
      const headers = ["Submission Id", "Draft Data"];
      const drafts = [
      { "Submission Id": "1", "Draft Data": "Draft 1 Data" },
      { "Submission Id": "2", "Draft Data": "Draft 2 Data" },
      // Add more draft data objects as needed
      ];

      // Call the function to create the table with your draft data
      const table = createTable(headers, drafts);

      // Add the table to the document body
      document.body.appendChild(table);

       
        Terms & ConditionsAccessibility statement

        Loading footer...