Click here to Skip to main content
14,970,251 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Inserting HTML Contents At the End of the Elements in jQuery</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

</head>
<body>
    <table>
    	<tr id="tab1">
    		<th>Name</th>
    		<th>Status</th>
    	</tr>
    </table>
</body>
<script>
$(document).ready(function(){
    $("#tab1").append('<?php
	        $con = mysqli_connect("localhost","root","","oatdistribution");
	        $tabsql = "SELECT Name, Status from jan"; 
	        $data = mysqli_query($con,$tabsql);
	        while($row = mysqli_fetch_assoc($data)){
	        	echo "<tr>";
	       		echo "<td>" . $row['Name']."</td>";
	        	echo "<td>" . $row['Status']."</td>";
	        	echo "</tr>";
	        }
	    ?>');
});
</script>
</html>


Output:
             John       Delivered
             Richard    Delivered
Name Status  Sam        Delivered
             Allan      Not Delivered
             Michelle   Not Delivered


What I have tried:

I am trying to get the data to be in the table without the piece of code being in the tr tag but the output seems be side by side with the title "Name" and "Status"

How do I go about that?
Posted
Updated 25-Mar-21 22:50pm

1 solution

You are appending to the element with ID tab1, which is the header <tr> element.

If you want to append to the <table> element, move the ID to that element:
HTML
<table id="tab1">
    <tr>
        ...
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900