能够从文本区域插入文本到表格

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;