title: Need help on Javascript coding converting to use my html table
body: <p>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 retrieved through the <code>$spinnerCount</code>.</p>
  
  <p>The problem is that everytime I submit a question (using a textarea and submit buttom to enter and 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 every time I submit a question, it adds a new row every time, 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:</p>
  
  <pre><code>var enumeratorCell = document.createElement("td");
  </code></pre>
  
  <p>So except creating an element to create a new row, I wanted to retrieve an element so that it submits the question in an existing row (each row contains a text box so question would go into the text box in the row) starting from top row and going down one row every time a question is submitted, rather than creating a new row everytime a question is submitted. The questions would go under the "Questions" column.</p>
  
  <p>Now somebody (user: nnnnn) posted this to me:</p>
  
  <p>Below is an example of a table the user coded himself:</p>
  
  <pre><code>&lt;table id="myTable"&gt;
     &lt;tr&gt;
        &lt;td&gt;1&lt;/td&gt;
        &lt;td&gt;2&lt;/td&gt;
     &lt;/tr&gt;
     &lt;tr&gt;
        &lt;td&gt;3&lt;/td&gt;
        &lt;td&gt;4&lt;/td&gt;
     &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Below is user's javascript:</p>
  
  <pre><code>//If you want to retrieve or change the contents of the existing cells you can do this:
  
  // get reference to the table
  var t = document.getElementById("myTable"),
      r,
      c,
      i, j;
  
  // loop through the rows
  for (i=0; i&lt;t.rows.length; i++) {
     // get reference to current row
     r = t.rows[i]; //
     // loop through tds of current row
     for (j=0; j&lt;r.cells.length; j++) {
         // get reference to current cell
         c = r.cells[j]; // equivalent to t.rows[i].cells[j]
        // display content of cell
        alert(c.innerHTML);
        // change content of cell
        c.innerHTML = "New value " + i + j;
      }
  }
  </code></pre>
  
  <p>The problem is that I have tried to manipulate this into my code  but #i could not get it to work. Reason for this is because I don't know to use this javascript for my table. so what I wanted to know is can somebody manipulate this javascript code so that it matches with my table?</p>
  
  <p>Below is code for my table and the textarea where the questions will be entered and submitted:</p>
  
  <p>//My table</p>
  
  <pre><code>&lt;table id="qandatbl" align="center"&gt;
      &lt;thead&gt;
      &lt;tr&gt;
      &lt;th&gt;&lt;span id="qidhead"&gt;Question No&lt;/span&gt;&lt;/th&gt;
      &lt;th&gt;&lt;span id="questionhead"&gt;Question&lt;/span&gt;&lt;/th&gt;
      &lt;th&gt;&lt;span id="optionshead"&gt;Option Type&lt;/span&gt;&lt;/th&gt;
      &lt;th&gt;&lt;span id="durationhead"&gt;Duration&lt;/span&gt;&lt;/th&gt;
      &lt;th&gt;&lt;span id="weighthead"&gt;Weight(%)&lt;/span&gt;&lt;/th&gt;
      &lt;th&gt;&lt;span id="answerhead"&gt;Answer&lt;/span&gt;&lt;/th&gt;
      &lt;th&gt;&lt;span id="videohead"&gt;Video&lt;/span&gt;&lt;/th&gt;
      &lt;th&gt;&lt;span id="audiohead"&gt;Audio&lt;/span&gt;&lt;/th&gt;
      &lt;th&gt;&lt;span id="imagehead"&gt;Image&lt;/span&gt;&lt;/th&gt;
      &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
      &lt;?php
      $spinnerCount = $_POST['textQuestion'];
  if($spinnerCount &gt; 0) {
     for($i = 1; $i &lt;= $spinnerCount; $i++) {?&gt;
  
      &lt;tr&gt;
      &lt;td class="qid"&gt;&lt;?php echo $i; ?&gt;&lt;/td&gt;
      &lt;td class="question"&gt;&lt;/td&gt;
      &lt;td class="options"&gt;&lt;/td&gt;
      &lt;td class="duration"&gt;&lt;/td&gt;
      &lt;td class="weight"&gt;&lt;/td&gt;
      &lt;td class="answer"&gt;&lt;/td&gt;
      &lt;td class="video"&gt;&lt;/td&gt;
      &lt;td class="audio"&gt;&lt;/td&gt;
      &lt;td class="image"&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;/tbody&gt;
      &lt;?php
  }
  }
  ?&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>//textarea and submit button where questions are typed in and submitted, the textarea and submit button is placed below the table above</p>
  
  <pre><code>&lt;form id="enter" action="&lt;?php echo htmlentities($_SERVER['PHP_SELF']); ?&gt;" method="post"&gt;
  &lt;table id='middleDetails' border='1'&gt;
  &lt;tr&gt;
  &lt;th class='tblheading' colspan='2'&gt;SESSION DETAILS&lt;/th&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td id="questionContent"&gt;Question:&lt;/td&gt; 
  &lt;td id="questionTextarea"&gt;&lt;textarea rows="5" cols="40" id="questionTxt" name="questionText"&gt;&lt;/textarea&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td id="addQuestionRow" colspan='2'&gt;&lt;input id="addQuestion" type="button" value="Add Question" name="addQuestionBtn" onClick="insertQuestion()" /&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/form&gt;
  </code></pre>