jqueryを使用した動的行とセルの構築

<html><head> 
<link type="text/css" rel="stylesheet" href="file:///C:/Users/Documents/style.css" /> 
<script type="text/javascript" src="file:///C:/Users/Documents/jquery-1.7.1.js"></script> 
<script type="text/javascript" src="file:///C:/Users/Documents/jquery.tablesorter.js"></script> 

<script type="text/javascript"> 
$(document).ready(function() { 
    load(); 
}); 

var map1 = { "iDate":"test_value1", "iName":"test_value2" , "iFile":"test_value3" }; 
var map2 = { "iDate":"nexttest_value1", "iName":"nexttest_value2", "iFile":"nexttest_value3" }; 

var list = new Array(map1, map2); 
list[0] = map1; 
list[1] = map2; 

function load() { 
    var beginTD = $("<td><div class='scroll-pane horizontal-only' style='vertical-align: top'>"); 
    var endTD = $("</div></td>"); 

jQuery.each(list, function(index, map) { 
$("#hpTable > tbody:last").append($("<tr>")); 
    jQuery.each(map, function(key, value) { 
     var pTag = $("<p id='" + key + "'>" + value + "</p>"); 
      $("#hpTable td:last").append(beginTD, pTag, endTD); 
     }); 
    $("#hpTable").append($("</tr>")); 
    }); 
}; 
</script> 
</head> 
<body> 
<br> 
<table id="hpTable" cellpadding="5" width="100%" style="table-layout:fixed" class="tablesorter"> 
<thead><tr> 
    <th width="9%">Date</th> 
    <th width="9%">Name</th> 
    <th>File</th> 
</tr> 
</thead> 
<tbody></tbody> 
</table> 
</body 
</html>

こんにちは皆さん！私の2番目の投稿を見直してくれてありがとう。私はjquery初心者で、なぜ行とセルを動的に構築できないのかを探していますか？どんな助けもありがとう！jqueryを使用した動的行とセルの構築

出典

2012-03-23 sasims

要素のフラグメントをDOMに追加するために 'append（）'を使用することはできません（例えば、1回の呼び出しで ''に続いて ''別のコールは期待どおりに機能しません）。要素全体を追加できるだけなので、戦略を再設計する必要があります。達成したいことについてより多くの情報を提供すれば、それを手助けすることができます。 –

こんにちはフレデリック、私は動的にマップのリスト（文字列、文字列）のリストをループする行を作成しようとしています – sasims

フレデリックハミディは、jQueryでタグを開いたり閉じたりしないように、別のタグの中にタグを追加して単純な変数として使用しています。

次に、あなたの「それぞれの」解析は次のようになります。

jQuery.each(list, function(index, map) { 
    // you create a tr tag and attached it to your table body 
    var trTag = $("<tr></tr>").appendTo($("#hpTable > tbody")); 
    jQuery.each(map, function(key, value) { 
      var tdTag = $('<td/>').appendTo(trTag); 
      var divTag = $("<div class='scroll-pane horizontal-only' style='vertical-align: top'/>").appendTo(tdTag); 
      var pTag = $("<p id='" + key + "'>" + value + "</p>").appendTo(divTag); 
     }); 
    }); 
};

出典

2012-03-23 16:38:21 Mordhak

おかげで、Mordhak、これは素晴らしく働いた！とすばやく応答してくれてありがとう...このサイトは岩と貢献するすべての人々！ :) – sasims

@サシムこの回答を受け入れることで、「感謝」と言うことができます.Mordhakは評判のポイントを得るでしょう。答えもEです。ありがとう –

あなたがテーブルのHTMLを構築するつもりなら、あなたは簡単なJavascriptの文字列でそれを構築することによって、より良いパフォーマンスを得られます最後に一度DOMに追加します。このようなもの：

function load() { 
    var html = []; 
    var beginTD = "<td><div class='scroll-pane horizontal-only' style='vertical-align: top'>"; 
    var endTD = "</div></td>"; 

    jQuery.each(list, function(index, map) { 
     html.push('<tr>'); 
     jQuery.each(map, function(key, value) { 
      html.push(beginTD, "<p id='" + key + "'>" + value + "</p>", endTD); 

     }); 
     html.push('</tr>'); 
    }); 

    $("#hpTable tbody").append(html.join('\n')); 
};

私はオリジナルのソリューションを編集して、アレイを構築し、改行します。

出典

2012-03-23 16:39:00

Dan A、フィードバックありがとう。私はこれを試みたが、それを働かせることができなかった...私は何かを逃した必要がありますか？しかし、Mordhakのポストはうまくいった。再度、感謝します！ – sasims

@サシムそれは私のテストを参照してください見て、動作するようです：http://jsfiddle.net/6q7BS/ –

jqueryを使用した動的行とセルの構築

答えて

関連する問題