When pulling information from a database table and placing it into an HTML table, I encountered an issue with allowing the user to edit the data. I attempted to use jQuery to create a click event for editing, but when utilizing <textarea> or <input>, it caused the cell to enlarge and disrupt the appearance of the entire table. Can the table cell itself be converted into an input field? The challenge is finding the best option for text editing without compromising the table layout. My ultimate goal is to update the value back to the database once it has been edited by the user.
I have attached two screenshots for reference - the first displaying the original table design, and the second illustrating how it appears distorted when a <textarea> is added.
Screenshot of Table
Screenshot of Table with Textarea
<?php
include("connection.php");
$query= "SELECT * FROM schedule";
$result = mysqli_query($link, $query);
$scheduletext="<table>";
if($result = mysqli_query($link, $query)) {
$b=1;
while ($row=mysqli_fetch_array($result)) {
$scheduletext.="<tr>";
$a=1;
while($a< mysqli_num_fields($result)) {
if(($a == 1)and ($b == 1)){
$scheduletext.="<th></th>";
} else {
if (($a == 1) or ($b == 1)) {
$scheduletext.="<th>".$row[$a]."</th>";
} else {
$scheduletext.="<td>".$row[$a]."</td>";
}
}
$a++;
}
$scheduletext.="</tr>";
$b++;
}
}
$scheduletext=$scheduletext."</table>";
?>
<html>
<head>
<title>TastySnack - Production Schedule</title>
<link href="https://fonts.googleapis.com/css?family=Kaushan+Script" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="tasty.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div id="top">
<div id="top-left">
TastySnack Production
</div>
<div id="top-right">
<img id="logo" src="images/TastysnackLogo.jpg">
</div>
</div>
<div id="split"></div>
<div id="schedule">
<?php
print_r($scheduletext);
?>
<div id="new"></div>
</div>
<script type="text/javascript">
$("td").click(function(){
$(this).html("<textarea>");
});
</script>
</body>
</html>