jQueryで動的に作成されたテーブルに入力フィールド（テキストボックス）を追加するにはどうすればよいですか？

Question

Javascriptで再生して、テキストボックスと動的テーブルを動的に作成する方法を見つけました。私はテキストボックスとテーブルを作成する方法を考え出しましたが、私は一緒にマージする方法を知らないので、動的に作成されたテーブルには、好みのパラメータでテキストボックスが保持されます。

テーブルに行とセルを動的に追加するこのjQueryスクリプトがあります。私は、テーブルには、「要素」と呼ばれる入力フィールドを持っている必要がありますどのように多くの行を指定

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> 

スクリプト：

<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> 

代わりのテキスト「セル」への追加各列、私はテキストボックスを追加したいと思います。 2番目の列は次の属性を持つべき

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

：

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

を3番目の列は、次の属性を有するべきである：

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

最初の列は、以下の属性を有するべきです

これをマージすると、テーブルにテキストボックスが保持されます上記のパラメータは？

ありがとうございます！

Answer 1

これは動作します：http://jsfiddle.net/RrhT9/

をまた、あなたがセルあなたの方法に追加されたコンテンツを持っている可能性がありますが、

Answer 2

次の操作を行うことができます

var cellText = "<input type="text" id=\"MCQ_"+i+"__choice_number\" name=\"MCQ["+i+"].choice_wording\"/>"; 

そして、あなたが作成している入力ボックスのそれぞれに応じて変化します。