Member Avatar for rizla777

Hi

I'm not sure how to go about this but im trying to place a box on a page similar to this box that im typing in right now however it needs to look something like this:

ID |First Name |LastName |Address
1 Some Guy 12 somewhereville

It will be populated by customer data when the person clicks a search button


Thanks

  • 3 Contributors
  • 2 Replies
  • 91 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by drjohn

Dani AI

Generated

Use a semantic HTML table inside a styled container for tabular customer results. That keeps the markup accessible and easy to style. Below is a compact pattern to render results on demand and keep the UI clean.

<div class="results-box">
  <table>
    <caption>Search results</caption>
    <thead>
      <tr><th scope="col">ID</th><th scope="col">First name</th><th scope="col">Last name</th><th scope="col">Address</th></tr>
    </thead>
    <tbody id="results-body">
      <!-- rows injected here -->
    </tbody>
  </table>
</div>
.results-box{border:1px solid #ccc;padding:10px;border-radius:4px;max-width:900px;overflow:auto;}
table{width:100%;border-collapse:collapse;}
th,td{padding:6px 8px;border-bottom:1px solid #eee;text-align:left;}

Fetch results from a server endpoint that returns JSON and inject rows with DOM methods (use textContent to avoid XSS). Example pattern:

async function doSearch(q){
  const res = await fetch('/api/customers?q='+encodeURIComponent(q));
  if(!res.ok) throw new Error(res.statusText);
  const rows = await res.json();
  const tbody = document.getElementById('results-body');
  tbody.innerHTML = '';
  if(rows.length === 0){
    tbody.innerHTML = '<tr><td colspan="4">No results</td></tr>';
    return;
  }
  rows.forEach(r=>{
    const tr = document.createElement('tr');
    ['id','firstName','lastName','address'].forEach(k=>{
      const td = document.createElement('td');
      td.textContent = r[k] || '';
      tr.appendChild(td);
    });
    tbody.appendChild(tr);
  });
}

Notes and troubleshooting: as implied, wire this to your search form/button. As asked, the server should supply JSON (or server-render the table). For large datasets add server-side paging, sorting, and limits. Always validate and escape on the server and use textContent client-side to prevent XSS; see OWASP on XSS. For semantics and examples see the HTML table docs and the Fetch API guide on MDN.

HTML table element
Using the Fetch API
OWASP: Cross Site Scripting (XSS)

Recommended Answers

All 2 Replies

Member Avatar for drjohn

Where is the data you want displayed coming from? A database? If so how are you extracting the data?

Edited by drjohn because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.