This is what I want to know. I have a table which has the number of rows depended on what the number is in the spinner. This does work e.g If I enter 25 in spinner it comes up with 25 rows, if I enter 7 in spinner comes with 7 rows. This is done through the $sessionCount variable
So my problem is this:
Lets say there are a number of rows in a table. What I have is a textarea where the user enters in their question and then submits the question, the question should be inserted and appear in the first row of the table under the “Question” column, the textarea goes blank and the user enters in his second question, if the user submits this then the question would appear in the second row, 3rd question into 3rd row, 4th question 4th into row etc.
The problem is that everytime I submit a question into the table, it creates a new row. So if I had 20 empty rows in the table because I stated in the spinner I wanted 20 questions, then what happens is everytime I submit a question, it adds a new row everytime, so submitting 20 questions from the textarea would mean the table would contain 20 blank rows and 20 rows with questions. I am guessing it is because of this for example:
var enumeratorCell = document.createElement("td");
So what I want to know is how excepting creating an element to create a new row, how can I retrieve an element so that it submits the question in an existing row from top to bottom rather than creating a new row everytime a question is submitted?
Below is my code:
function insertQuestion() {
var table = document.getElementById("qandatbl");
var tableBody = table.tBodies[0];
var textarea = document.getElementById("questionTxt");
var row = document.createElement("tr");
tableBody.appendChild(row);
var enumeratorCell = document.createElement("td");
enumeratorCell.className = "qid";
row.appendChild(enumeratorCell);
var questionCell = document.createElement("td");
questionCell.className = "question";
row.appendChild(questionCell);
var questionText = textarea.value;
var questionContent = document.createTextNode(questionText);
questionCell.appendChild(questionContent);
}
HTML:
// table where questions will be inserted into
<table>
<?php
$spinnerCount = $_POST['textQuestion'];
if($spinnerCount > 0) {
for($i = 1; $i <= $spinnerCount; $i++) {?> // this get the number of questions from the spinner
<tr>
<td class="qid"><?php echo $i; ?></td>
<td class="question"></td>
</tr>
</table>
//Text Area and submit button to submit questions
<form id="enter" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post">
<table id='middleDetails' border='1'>
<tr>
<th class='tblheading' colspan='2'>SESSION DETAILS</th>
</tr>
<tr class='trheight'>
</tr>
<tr>
<td id="questionNum">Question No </td>
</tr>
<tr>
<td id="questionContent">Question:</td>
<td id="questionTextarea"><textarea rows="5" cols="40" id="questionTxt" name="questionText"></textarea></td>
</tr>
<tr>
<td id="addQuestionRow" colspan='2'><input id="addQuestion" type="button" value="Add Question" name="addQuestionBtn" onClick="insertQuestion()" /></td>
</tr>
</table>
</form>