Comment puis-je ajouter des champs de saisie (zone de texte) à un tableau créé de façon dynamique avec jQuery

J'ai été jouer avec Javascript pour savoir comment je peux créer dynamiquement des zones de texte et d'un tableau dynamique. J'ai compris comment créer des zones de texte et le tableau, mais je ne sais pas comment fusionner ces ensemble, de sorte que le créé dynamiquement table contient les zones de texte avec mes paramètres préférés.

J'ai ce script jQuery qui ajoute dynamiquement des lignes et des cellules d'un tableau. - Je spécifier le nombre de lignes de la table doit avoir un champ appelé "élément"

Le code HTML:

<input type="text" name="element" id="element" />
    <input type="button" value="Tilføj" id="add" />
    <br />

    <span id="MCQ-textbox">&nbsp;
        <table id="tbl" border="1">
            <tbody>
            </tbody>
        </table>
    </span>

Les scripts:

<scripts language="javascript">

function createDynamicTable() 
{
    var tbody = $("#tbl");
    var rows = $('#element').val();
    var number_of_columns = 3;

    if (tbody == null || tbody.length < 1) return;

    var tfirstrow = $("<tr>");
    $("<th>")
                .addClass("tableCell")
                .text("#")
    //              .data("col")
                .appendTo(tfirstrow);
    $("<th>")
                .addClass("tableCell")
                .text("Svarmulighed")
    //              .data("col")
                .appendTo(tfirstrow);
    $("<th>")
                .addClass("tableCell")
                .text("Hjælpetekst")
    //              .data("col")
                .appendTo(tfirstrow);

    tfirstrow.appendTo(tbody);

    for (var i = 0; i < rows; i++) {

        var trow = $("<tr>");
        for (var c = 0; c < number_of_columns; c++) 
        {
            var cellText = "Cell"
            $("<td>")
                    .addClass("tableCell")
                    .text(cellText)
                    .data("col", c)
                    .appendTo(trow);
        }
        trow.appendTo(tbody);
    }

}


$(document).ready(function () {
    $('#add').click(function () {
        createDynamicTable();
    });
});

</SCRIPT>

Au lieu d'ajouter le texte de la "cellule" pour chaque colonne, je voudrais ajouter des zones de texte.

La première colonne doit avoir les caractéristiques suivantes:

var element = document.createElement("input");
    element.setAttribute("type", "text");
    element.setAttribute("id", "MCQ_"+i+"__choice_number");
    element.setAttribute("name", "MCQ["+i+"].choice_number");

la deuxième colonne doit avoir les caractéristiques suivantes:

 var element = document.createElement("input");
    element.setAttribute("type", "text");
    element.setAttribute("id", "MCQ_"+i+"__choice_wording");
    element.setAttribute("name", "MCQ["+i+"].choice_wording");

et la troisième colonne doit avoir les caractéristiques suivantes:

    var element = document.createElement("input");
    element.setAttribute("type", "text");
    element.setAttribute("id", "MCQ_"+i+"__help_text");
    element.setAttribute("name", "MCQ["+i+"].help_text");

Comment puis-je les fusionner, de sorte que ma table contient les zones de texte avec les paramètres ci-dessus?

Merci!