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
に感謝します... :)
次の2つのオプションを使用できます。
エレメントの作成が最速の方法です( here を確認してください):
$(document.createElement('table'));
InnerHTMLはもう1つの一般的なアプローチです。
$("#foo").append("<div>hello world</div>"); // Check similar for table too.
jQueryを使用して行を持つ新しいテーブルを作成し、div内にラップする方法 の実際の例を確認してください。
他のアプローチもあります。これを出発点として使用してください。コピー&ペーストソリューションとしてではありません。
チェック DOMを使用したテーブルの動的作成
私見、あなたはオブジェクトと内部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;
}
少し文字列化されていない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);
探しているものの完全な例を次に示します。
<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>
ものを動的に作成したいことを理解しています。だからといって、実際に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構造は常に同じままです。
さらに、投稿で言及したプロセスを使用すると、[object Object]
のみが取得されます。 createProviderFormFields
を呼び出すと、関数呼び出しであるため、オブジェクトが返されるためです。追加する必要があるため、テキストボックスは表示されません。そのためには、個々のコンテンツをobject
から取り除き、それからhtmlを構築する必要があります。
Htmlのみを作成し、必要に応じてラベルと入力のid
を変更する方がはるかに簡単です。
たとえば、サーバーからジェイソンデータを受信しました。
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;
}