如何在表中添加一行？

Question

我有一個應用程序，用戶在textarea中輸入他們的問題，然後單擊「添加問題」按鈕將問題添加到新行中。問題在於應用程序讓用戶在新行中顯示一個問題，但是當我想在新行中提交第二個問題時，它不會讓我。

（在Jsfiddle中，它不會讓您添加第二個問題，而在我的瀏覽器應用程序中不會讓您添加第二個問題，但它會顯示一個警報，指出問題無效，此警報消息應該不會出現，除非問題textarea是空的或包含少於5個字符。）

那麼如何不讓我在表中添加第二個問題？

我的代碼是在的jsfiddle，單擊here

JS（ 「NOWRAP - 身體」 中的jsfiddle選項）：

function insertQuestion(form) { 

    alertErrors = "", 
    // Note, this is just so it's declared... 
    qnum = 1; 

    if (form.questionText.value == ""){ 
     alertErrors += "\nYou have not entered a valid Question\n"; 
    } 
    else if (form.questionText.value.length < 5){ 
     alertErrors += "\nYou have not entered a valid Question\n"; 
    } 

    // Stop execution with a return 
    if (alertErrors != "") { 
     alert(alertErrors); 
     return; 
    } 

    var $tr = $("<tr></tr>"); 
    var $qid = $("<td class='qid'>" + qnum + "</td>"); 
    var $question = $("<td class='question'></td>"); 

    $('#questionTextArea').each(function() { 

     var $this = $(this); 
     var $questionText = $("<textarea></textarea>") 
         .attr('name',$this.attr('name')) 
         .attr('value',$this.attr('value')) 

     $question.append($questionText); 

    }); 

    $tr.append($qid); 
    $tr.append($question); 

    $('#qandatbl').append($tr); 

    form.numberOfQuestions.value = qnum; 

    ++qnum; 
    $("#questionNum").text(qnum); 
    form.questionText.value = ""; 
} 

HTML：

<form id="enter" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post" onsubmit="return validateForm(this);" > 
<div id="detailsBlock"> 
<table id="question"> 
<tr> 
    <th colspan="2"> 
     Question Number <span id="questionNum">1</span> 
    </th> 
</tr> 
<tr> 
    <td rowspan="3">Question:</td> 
    <td rowspan="3"> 
     <textarea id="questionTextArea" rows="5" cols="40" name="questionText"></textarea> 
    </td> 
</tr> 
</table> 

    <table id="questionBtn" align="center"> 
<tr> 
<th> 
<input id="addQuestionBtn" name="addQuestion" type="button" value="Add Question" onClick="insertQuestion(this.form)" /> 
</th> 
</tr> 
</table> 

</div> 
<hr/> 

<table id="qandatbl" border="1"> 
<tr> 
    <th class="qid">Question No</th> 
    <th class="question">Question</th> 

</tr> 
</table> 
</form> 

Answer 1

將第一textarea的後你將有2個名爲「questionText」的表單元素。

form.questionText現在將返回一個NodeList而不是一個元素，會導致錯誤，因爲NodeList沒有屬性「value」。

更新小提琴：http://jsfiddle.net/B872J/8/

Answer 2

我想我知道是什麼問題。當您創建表格行時，您將名稱值爲「questionText」的輸入添加爲其中一個單元格的內容。由於您的表單包含整個html，因此會導致重複的questionText輸入。當它試圖檢查questionText的值時，它不知道使用哪一個。根據chrome中的javascript控制檯，它處理的是輸入元素的nodeList（EDIT：... not array ... nodelist ...我應該知道）。簡單的解決方案是將結束</form>標記的位置更改爲<hr>標記之前。

Forked Fiddle

這將限制它的原始輸入元件去除運行到重複的可能性。

Answer 3

像這樣使用jQuery來嘗試。 http://jquery-howto.blogspot.com/2009/02/add-table-row-using-jquery-and.html

Answer 4

我做了更新了自己的小提琴..嘗試here，在原始提琴的問題是，它在form.questionText在第二次調用發送什麼