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

时间:2011-12-17 15:14:26

标签: javascript

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

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

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

  1. 打开网格(打开网格链接)并选择选项“4”。

  2. 在“答案数”文本框中输入数字2(#numberAnswerTxt)

  3. 选择按钮“A”和“C”。

  4. 点击“添加问题”按钮。

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

1 个答案:

答案 0 :(得分:0)

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

}