How to change the contents of an HTML table with php + javascript

Question

I have a page which, when a user visits it, makes a MySQL call to a DB, and then puts that information into an html table presented to the viewer by the time the page initially loads.

I want to allow more advanced refinement options, like filtering by name, age, etc.

when the user submits their refinement options, how would I clear out the "old" data in the HTML table that is displayed on page load, and then re-populate it with the "new" data PHP returns?

Will this require DOM manipulation via JS? How can I specify the target node to echo out my PHP into?

Thanks :)

It sounds like you want to use AJAX to gather new information from the database and remake the table with new results. Is this right? — Biotox, Jul 23 '12 at 18:17
@Biotox: Yes! That's exactly it. Sorry I did not know the term. Do you know of any good getting-started resources for AJAX? — tdc, Jul 23 '12 at 18:22
If you know/use jQuery, they have easy `.ajax()` function. You can just Google "jquery ajax" and find the API for it. w3schools.com also has a tutorial/basics for AJAX. — Biotox, Jul 23 '12 at 18:25

score 1 · Accepted Answer · edited May 23 '17 at 11:55

1

When the data you wish to display is available from a server and is not yet in the browser, you can make a AJAX call to go to the server and pull the data back from it for display.

A common use case for this is when you are displaying live information which could be periodically updated

What is ajax?

Want to start learning ajax?

edited May 23 '17 at 11:55

Community

1
1

answered Jul 23 '12 at 18:19

PoX

1,229
19
32

Thank you for providing links, they have gotten me off to a great start! :) – tdc Jul 23 '12 at 20:25

score 0 · Answer 2 · answered Jul 23 '12 at 18:18

0

Dynamic java script will help you to incorporate the changes into html page.

AJAX will be the best solution to do this.

answered Jul 23 '12 at 18:18

rgeddam

81
1
10

score 0 · Answer 3 · answered Jul 23 '12 at 18:21

0

Ajax, Yes, document.getElementById

answered Jul 23 '12 at 18:21

Yehonatan

3,168
7
31
39

How to change the contents of an HTML table with php + javascript

3 Answers3