Question

我有一个应用程序，您可以在我的jsfiddle中测试它是如何工作的，jsfiddle。现在这个应用程序做的是允许用户为每个问题选择选项和答案（jsfiddle上的应用程序没有显示问题，因为这个问题不需要）。

现在发生的事情是用户选择一个选项，输入他/她想要的答案数量，然后从下面的按钮中选择答案。用户将添加一个问题，然后表格中将出现一个新行，显示所选答案。

如何使用应用程序的示例，以便您可以在jsfiddle中自己尝试：

打开网格（打开网格链接）并选择选项“4”。
在“答案数”文本框中输入数字2（#numberAnswerTxt）
选择按钮“A”和“C”。
点击“添加问题”按钮。

现在你可以看到一个新的表行，但是除了一个空的文本框之外没有任何内容在“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);

这可以在Jsfiddle Javascript部分即将结束的function insertQuestion(form)中找到。

Answer 1

我不确定这是否是您的想法，但以下修改过的功能会将所选按钮（没有开/关类和事件）复制到新行。根据需要通过添加其他类来调整，以便按照您想要的方式获得样式。注意我建议不要直接在元素上设置样式属性。使用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 = "";

}

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

1 个答案: