I have a php table retrieved dynamically from Mysql, and i also have an input field in the table to edit a column.
When i clicked anywhere on the table, the table would disappear - so i used pointer-events: none; in the css. This cured the problem, however now when i click the input field to type something in, the table disappears again.
I do not want the table to disappear when i click on the input field to type something in.
I have tried many different Pointer events in the css of the input field without any luck...and if i take the pointer-events: auto; out of the css for the input field, i cannot click on the input field at all
Below is my code - Does anyone know what i am doing wrong?
Code for my Table:
<div id="table1" class="table1">
<form action="" method="post">
<?php
if(isset($_POST["submit"]))
{
$searchTerm=$_POST['search'];
$stmt = $conn->prepare(" SELECT question.description AS question, answer.description AS answer, discipline.name AS name, response.responseid AS responseid, response.response AS response, response.student_id AS student_id, response.Date_Time AS Date
FROM response
INNER JOIN answer ON response.question_id = answer.answerid
INNER JOIN question ON response.question_id = question.qid
INNER JOIN discipline ON response.discipline_id = discipline.disciplineid WHERE Date_Time LIKE :searchTerm");
$stmt->bindValue(':searchTerm','%'.$searchTerm.'%');
$stmt->execute();
$result=0;
/*
The above code is a query which selects attributes according to the search term
*/
echo "<table> <tr><th>Discipline</th><th>Question</th><th>Student ID</th><th>Response</th><th>Date & Time</th><th>Answer</th><th>Final Marks</th></tr>";
while ($response = $stmt->fetch()) /* This is a While loop which iterates each row */
{
echo " <tr><td>".$response["name"]."</td><td>".$response["question"]."</td><td>".$response["student_id"]."</td><td>".$response["response"]."</td><td>".$response["Date"]."</td><td><input type='text' name='date' value=". $response["answer"]."></td></tr> ";
$result++;
}
} /* This bit of code closes the connection with the database */
?>
<input type="submit" name="save" value="save">
</form>
</div>
CSS:
.table1 {
position: fixed;
pointer-events: none;
background-color: white;
border-collapse: collapse;
width: 40px;
color: black;
margin-left: 50px;
margin-top: 66px;
white-space: nowrap;
}
.table1 input {
pointer-events: auto;
width: 20px;
height:25px;
}