如何在新的表格行列下顯示我的答案

Question

我有一個應用程序，您可以在我的jsfiddle中測試以查看它是如何工作的，jsfiddle。現在這個應用程序所做的是允許用戶爲每個問題選擇選項和答案，（jsfiddle上的應用程序不會顯示問題，因爲這個問題不需要）。

現在會發生什麼是用戶選擇一個選項，鍵入他/她想要的答案的數量，然後從下面的按鈕中選擇答案。用戶將添加一個問題，然後在顯示所選答案的表格中將出現一個新行。

關於如何使用應用程序，所以你可以嘗試自己的jsfiddle例：

1. 打開網格（開放式網格鏈接）並選擇選項「4」。

2. 在文本框（#numberAnswerTxt）

3. 選擇按鈕 「A」 和 「C」 的 「解答數」 鍵入號碼2。

4. 點擊「添加問題」按鈕。

現在你可以看到一個新錶行出現但沒有什麼是除了一個空的文本框輸入「ANSWER2欄下。（不需要文本框）。

我想是的精確副本當在新表格行中提交答案時，答案按鈕（如果按照小提琴中的示例操作，則其按鈕「A」到「D」，選擇「A」和「C」）顯示在「答案」列中。我想顯示它爲按鈕，因爲它們是，但我絕對不知道如何做到這一點。

有誰知道該怎麼做？

控制的「答案」列的新錶行的代碼如下：

cell = document.createElement("td"); 
cell.className = "answer"; 
input = document.createElement("input"); 
input.name = "answer_" + qnum; 
cell.appendChild(input); 
row.appendChild(cell); 

這可以在function insertQuestion(form)具有接近的jsfiddle的Javascript節結束時被發現。

Answer 1

我不確定這是你的想法，但下面的修改函數會將所選按鈕（沒有開/關類和事件）複製到新行。根據需要進行調整，方法是添加額外的類以完全按照所需方式獲取樣式。注意我建議您不要直接在元素上設置style屬性。它應該足以使用CSS來做到這一點，也許使用規則:nth-child來獲得你需要的包裝。在http://jsfiddle.net/YTh5Y/查看更新的小提琴。

// make the counter global so that it isn't reset with each function call, 
// though it looks like you could get it from an input on the page. That 
// or figuring out the next number from the existing rows would be better. 
var qnum = 1; 
function insertQuestion(form) { 
    // make the row 
    var $html = $("<tr><td class='qid'>" + qnum + "</td></tr>"); 
    // make the column element where the answers will go 
    var $td = $("<td class='answer'></td>"); 
    // for each selected answer button, construct a new one and append it to the column 
    $('#optionAndAnswer .answerBtnsOn').each(function() { 
     var $this = $(this); 
     var $newBtn = $("<input class='answerBtns' type='button' style='display: inline-block;' />").attr('name',$this.attr('name')) 
        .attr('value',$this.attr('value')) 
        .attr('id','qid' + qnum + '-' + $this.attr('id')); // must be unique 
     $td.append($newBtn); 
    }); 
    // add column to row 
    $html.append($td); 
    // add row to table and update counter 
    $('#qandatbl').append($html); 
    form.numberOfQuestions.value = qnum; 

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

}