我有一个应用程序,您可以在我的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)
中找到。
答案 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 = "";
}