thank you. yes i understand that a little bit more. so in my table that i have in my php code should i set the id this way??
-
echo "<tableborder ='1'>
-
echo "TABLE";
-
-
<tr id ="tableID">
-
<th>"table"</th>
-
becuase if i do it like above it wont work
I know it's a little hard when you're first learning web development but there are a couple of things that you should be aware of.
First of all, ID attributes of HTML elements are used to identify a particular HTML element. No two HTML elements can have the same ID or else your HTML will be invalid (your web page will still be displayed but it will not be valid HTML).
You can retrieve a reference to an HTML element in your JavaScript code. You can then use JavaScript to work with the HTML element (for example you can change the style of the element to hide or show it).
You use the JavaScript document.getElementById() method to retrieve a reference to the HTML element.
Say you have the following tables (note that each table and each row have a unique ID):
-
<table id="tableID">
-
<tr id="row1"><td></td></tr>
-
<tr id="row2"><td></td></tr>
-
</table>
-
-
<table id="2ndTableID">
-
<tr id="2ndTableRow1"><td></td></tr>
-
<tr id="2ndTableRow2"><td></td></tr>
-
</table>
-
When you use the document.getElementById("tableID") you will be returned a reference to the the table element that has the ID "tableID".
If you use document.getElementById("2ndTableID") then you will be returned
the table element that has the ID "2ndTableID".
If you use document.getElementById("row1") then you will be returned the table-row element that has the ID "row1"....
I think you get the point.
In your case you want to hide the Table not a Table-Row.
So, grab a reference to the table element...not the row element...
A table element is different from a table-row element. Likewise, a button element is different from a div element.
Each have particular properties that you can work with in JavaScript and each have particular styles that should be used to display them.
To display a table you should use the CSS style display:"table"....to display a table row you should use the CSS style display:"table-row".
Now, regarding PhP.
Actually, let's step back a bit....
HTML is a markup language that lets you describe what content should look like when it is displayed in a web browser. You create HTML elements that contain information. You can retrieve references to these elements in JavaScript and work with them in the web browser (client side)
PhP code is executed on the server.
It is not accessible client side (you probably already know this but a lot of people get confused by this).
You can use PhP code to generate HTML based on whatever you're doing on the server.
In your case, you need to retrieve things from a database. This can't be done client side, so you have to do it in your PhP code.
Now you've figured out how to retrieved the information from your database... you want to display it in your web page.
So what do you do?
You do exactly what you were doing: loop through the rows of data retrieved and generate HTML code that "marks up" how the data should be displayed in the browser.
Because PhP code is executed on the server, it doesn't matter where you put it within your HTML (so long as it's outputting HTML into in a valid place).
So it's perfectly valid to have:
-
<html>
-
<head></head>
-
<body>
-
<?php echo " <h1>Hello World</h1>" ?>
-
</body>
It is valid because the php code is executed on the server...the above php code just prints "<h1>Hello World</h1>". Now if you were to take a look at the source for the HTML page in the web browser you will see:
-
<html>
-
<head></head>
-
<body>
-
<h1>Hello World</h1>
-
</body>
However, if you have:
-
<?php echo " <h1>Hello World</h1>" ?>
-
<html>
-
<head></head>
-
<body>
-
</body>
It would generate the following HTML:
-
<h1>Hello World</h1>
-
<html>
-
<head></head>
-
<body>
-
</body>
Which is not valid because you cannot have an <h1> element above the <html> element...
So, you're doing things correctly.
I know it can be overwhelming when you have so many components to work with (HTML, JavaScript, php)...but they all work together to give you your end result.
-Frinny