web-dev-qa-db-ja.com

jQueryを使用してHTMLテーブルを動的に作成するにはどうすればよいですか？

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>

これは、trおよびtdを取るidおよびlabelText要素を作成するメソッドです。

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]が表示されます...

console.logを使用してtextInputBoxを印刷すると、次の結果が得られます。

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

何が問題なのでしょうか？

パスを見せてくれた@theghostofcに感謝します... :)

javascriptjqueryhtml-table
26
Java Questions

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

  1. createElement
  2. InnerHTML

エレメントの作成が最速の方法です（ here を確認してください）：

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

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

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

jQueryを使用して行を持つ新しいテーブルを作成し、div内にラップする方法 の実際の例を確認してください。

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

編集：

チェック DOMを使用したテーブルの動的作成

編集2：

私見、あなたはオブジェクトと内部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;
}
16
Vivek Jain

少し文字列化されていない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);
6
Luke W

探しているものの完全な例を次に示します。

<html>
<head>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script>
        $( document ).ready(function() {
            $("#providersFormElementsTable").html("<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>");
        });
    </script>
</head>

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

ものを動的に作成したいことを理解しています。だからといって、実際にDOM要素を構築する必要があるわけではありません。 htmlを使用するだけで、目的を達成できます。

以下のコードを見てください：

HTML：

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

JS：

createFormElement("Nickname","nickname")

function createFormElement(labelText, id) {

$("#providersFormElementsTable").html("<tr><td>Nickname</td><td><input type='text' id='"+id+"' name='nickname'></td><lable id='"+labelText+"'></lable></td></tr>");
$('#providersFormElementsTable').append('<br />');
}

これは、あなたが動的に望むことをします、それが機能するためにはidとlabelTextが必要です。実際に変更されるのは動的変数のみである必要があります。 DOM構造は常に同じままです。

WORKING DEMO：

さらに、投稿で言及したプロセスを使用すると、[object Object]のみが取得されます。 createProviderFormFieldsを呼び出すと、関数呼び出しであるため、オブジェクトが返されるためです。追加する必要があるため、テキストボックスは表示されません。そのためには、個々のコンテンツをobjectから取り除き、それからhtmlを構築する必要があります。

Htmlのみを作成し、必要に応じてラベルと入力のidを変更する方がはるかに簡単です。

2
The Dark Knight

たとえば、サーバーからジェイソンデータを受信しました。

                var obj = JSON.parse(msg);
                var tableString ="<table id='tbla'>";
                tableString +="<th><td>Name<td>City<td>Birthday</th>";


                for (var i=0; i<obj.length; i++){
                    //alert(obj[i].name);
                    tableString +=gg_stringformat("<tr><td>{0}<td>{1}<td>{2}</tr>",obj[i].name, obj[i].age, obj[i].birthday);
                }
                tableString +="</table>";
                alert(tableString);
                $('#divb').html(tableString);

こちらIS gg_stringformatのコード

function gg_stringformat() {
var argcount = arguments.length,
    string,
    i;

if (!argcount) {
    return "";
}
if (argcount === 1) {
    return arguments[0];
}
string = arguments[0];
for (i = 1; i < argcount; i++) {
    string = string.replace(new RegExp('\\{' + (i - 1) + '}', 'gi'), arguments[i]);
}
return string;

}

0
GGSoft