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

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 = ""; 

}