Как отобразить ответы под новым столбцом строки таблицы

Question

У меня есть приложение, которое вы можете проверить в моем jsfiddle, чтобы посмотреть, как это работает, jsfiddle. Теперь то, что делает это приложение, позволяет пользователям выбирать параметры и ответы для каждого вопроса (приложение на jsfiddle не отображает вопрос, поскольку он не нужен для этого вопроса).

Теперь, когда пользователь выбирает вариант, вводит количество ответов, которое он/она хочет, а затем выбирает ответы с помощью кнопок ниже. Пользователь добавит вопрос, а затем появится новая строка в таблице, в которой указаны ответы.

Пример того, как использовать приложение, так что вы можете попробовать это сами в jsfiddle:

1. открыть (открыть ссылку сетки) сетки и выбрать опцию «4».

2. Введите номер 2 в "Количество ответов" Textbox (#numberAnswerTxt)

3. Кнопки выбора "A" и "C".

4. Нажмите кнопку «Добавить вопрос».

Теперь, как вы можете увидеть новую строку таблицы появляется, но ничего не находится под «колонке ANSWER2 кроме пустого текстового поля. (Не нужно текстовое поле).

То, что я хочу, это точная копия кнопки «Ответы» (если вы следуете примеру в скрипте, тогда его кнопки «А» - «D» с выбранными «А» и «С») отображаются в столбце «Ответ», когда ответ отправляется в новой строке таблицы. Я хочу показать его как кнопки, как они есть, но я абсолютно не знаю, как это сделать.

Кто-нибудь знает, как это сделать?

код, который контролирует новую строку таблицы для столбца «Ответ» ниже:

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

Я не уверен, что это то, что вы имеете в виду, но следующая измененная функция скопирует выбранные кнопки (без включения/выключения класса и событий) в новую строку. При необходимости добавьте дополнительные классы, чтобы получить стиль так, как вы хотите. Примечание. Я рекомендую не устанавливать свойство стиля непосредственно на элемент, как вы это делаете. Достаточно использовать 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 = ""; 

}