28

jQueryを使用して動的に次のようなHTMLテーブルを作成しようとしています:

<table id='providersFormElementsTable'>
    <tr>
        <td>Nickname</td>
        <td><input type="text" id="nickname" name="nickname"></td>
    </tr>
    <tr>
        <td>CA Number</td>
        <td><input type="text" id="account" name="account"></td>
    </tr>
</table>

これは私の実際のテーブルです:

<table border="0" cellpadding="0" width="100%" id='providersFormElementsTable'> </table>

これは、and を取る andtr要素tdを作成するメソッドです:idlabelText

function createFormElement(id, labelText) {
    // create a new textInputBox button using supplied parameters
    var textInputBox = $('<input />').attr({
        type: "text", id: id, name: id
    });
    // create a new textInputBox using supplied parameters
    var inputTypeLable = $('<label />').append(textInputBox).append(labelText);

    // append the new radio button and label
    $('#providersFormElementsTable').append(inputTypeLable).append('<br />');
}

ツールチップとして表示される値もあります。

でテーブルを動的に作成するのを手伝ってくださいtool tip and tr td。

編集：

次のコードでほぼ完了しました。

function createProviderFormFields(id, labelText,tooltip,regex) {
    var tr = '<tr>' ;
    // create a new textInputBox  
    var textInputBox = $('<input />').attr({
        type: "text",
        id: id, name: id,
        title: tooltip
    });  

    // create a new Label Text
    tr += '<td>' + labelText  + '</td>';
    tr += '<td>' + textInputBox + '</td>';  
    tr +='</tr>';
    return tr;
}

ここでは、ラベルが正しく表示され、入力ボックスが表示されず[object Object]、テキスト ボックスが表示される場所が示されています...

textInputBoxusingを印刷するとconsole.log、次のようになります。

[input#nickname, constructor: function, init: function, selector: "", jquery: "1.7.2", size: function…]

問題は何ですか？

道を教えてくれた人に感謝し@theghostofcます... :)

4

5 に答える 5

16

次の 2 つのオプションを使用できます。

  1. createElement
  2. 内部HTML

要素の作成が最速の方法です (ここを確認してください)。

$(document.createElement('table'));

InnerHTML は、もう 1 つの一般的なアプローチです。

$("#foo").append("<div>hello world</div>"); // Check similar for table too.

jQuery を使用して行を含む新しいテーブルを作成する方法に関する実際の例を確認し、 div 内にラップします。

他のアプローチもあるかもしれません。これを出発点として使用し、コピー アンド ペースト ソリューションとして使用しないでください。

編集：

DOMによるテーブルの動的作成にチェックを入れる

編集2：

IMHO、オブジェクトと内部 HTML を混在させています。純粋な内部 HTML アプローチを試してみましょう。

function createProviderFormFields(id, labelText, tooltip, regex) {
    var tr = '<tr>' ;
         // create a new textInputBox  
           var textInputBox = '<input type="text" id="' + id + '" name="' + id + '" title="' + tooltip + '" />';  
        // create a new Label Text
            tr += '<td>' + labelText  + '</td>';
            tr += '<td>' + textInputBox + '</td>';  
    tr +='</tr>';
    return tr;
}
于 2013-09-17T09:43:24.603 に答える
7

少し文字列化されていない html の例:

var container = $('#my-container'),
  table = $('<table>');

users.forEach(function(user) {
  var tr = $('<tr>');
  ['ID', 'Name', 'Address'].forEach(function(attr) {
    tr.append('<td>' + user[attr] + '</td>');
  });
  table.append(tr);
});

container.append(table);
于 2016-04-27T16:25:47.193 に答える