能夠從文本區域插入文本到表格

Question

這是我想知道的。我有一個表的行數取決於數字在微調器中的數量。這可以工作，例如如果我在微調器中輸入25，則會出現25行，如果我在微調器中輸入7，則會有7行。

所以我的問題是這樣的：

比方說，有一個表中的行數。我所擁有的是一個textarea，用戶在其中輸入他們的問題，然後提交問題，問題應該插入並出現在「Question」列下的表的第一行，textarea變爲空白，用戶進入他的第二個問題，如果用戶提交這個，那麼問題會出現在第二行，第三個問題到第三個行，第四個問題到第四個行等。

問題是我不知道該怎麼做。請有人能夠告訴我如何實現這一目標。我不是一個強大的Javascript程序員，我更像是一名Oracle和MYSQL程序員，但我需要爲我的項目使用Javascript。

任何幫助，將不勝感激

下面是我的Javascript代碼：

   <script type="text/javascript"> 

function insertQuestion() { 

      var qandatable = document.getElementById("qandatbl"); 
      var questionDiv = document.getElementById("question"); 
      var getQuestion = document.getElementById("questionTextarea");  

      var rowCount = qandatable.rows.length; 
     var row = qandatable.insertRow(rowCount); 

     var questionCell = row.insertCell(getQuestion); 

      questionCell.innerHTML = getQuestion.value; 
      } 

       </script> 

下面是HTML代碼：

//table where questions would be stored 

    <table id="qandatbl" align="center"> 
    <thead> 
    <tr> 
    <th><span id="qidhead">Question No</span></th> 
    <th><span id="questionhead">Question</span></th> 
    </tr> 
    </thead> 
    <tbody> 
    <?php 
    $spinnerCount = $_POST['textQuestion']; 
if($spinnerCount > 0) { 
    for($i = 1; $i <= $spinnerCount; $i++) {?> 

    <tr> 
    <td id="qid"><?php echo $i; ?></td> 
    <td id="question"></td> 
    </tr> 
    </tbody> 
    <?php 
} 
} 
?> 
</table> 

//table which consists of textarea and submit button 

<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> 
<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> 

Answer 1

你冷杉t將不得不創建行和單元格元素，然後才能將它們添加到表格中。

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 rowCount = tableBody.rows.length; 
var enumeratorContent = document.createTextNode(rowCount); 
enumeratorCell.appendChild(enumeratorContent); 
var questionText = textarea.value; 
var questionContent = document.createTextNode(questionText); 
questionCell.appendChild(questionContent); 

你的HTML應該是這樣的：

<table id="qandatbl" align="center"> 
    <thead> 
     <tr> 
      <th id="qidhead">Question No</th> 
      <th id="questionhead">Question</th> 
     </tr> 
    </thead> 
    <tbody> 
<?php 
    $spinnerCount = $_POST['textQuestion']; 
    if ($spinnerCount > 0) { 
     for($i = 1; $i <= $spinnerCount; $i++) { 
?> 
     <tr> 
      <td class="qid"><?php echo $i; ?></td> 
      <td class="question"></td> 
     </tr> 
<?php 
     } 
    } 
?> 
    </tbody> 
</table> 
<!-- table which consists of textarea and submit button --> 
<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> 
      <td id="questionNum">Question No </td> 
     </tr> 
     <tr> 
      <td id="questionContent">Question:</td> 
      <td id="questionTextareaCell"><textarea id="questionTxt" rows="5" cols="40" 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> 

你不應該使用的細胞產生的不止一次的IDS，因爲ID應該是每個文檔唯一的。

Answer 2

試試這個最後一行：

questionCell.innerHTML = getQuestion.value;