0

私が抱えている問題は、javascript を使用してテーブルを作成しようとすると、実際に終了タグを付ける前にテーブルを閉じていることです。

このソリューションを使用して、Cookie を記録/読み取り ます https://stackoverflow.com/a/1960049

私が必要としていたのは、この Cookie の「配列」からウィッシュリストを作成することでした。これには、すべての Cookie をループしてテーブルに配置する必要がありました。(#catalog div 内)

function loopArray() { 
      var cookie = $.cookie("testCookie"); 
      var items = cookie ? cookie.split(/,/) : new Array();


     $('#catalog').empty();
     $('#catalog').append("<table><tr><th>Part #</th><th>Delete</th></tr>");

     for(var i=0;i<items.length;i++){
         $('#catalog').append("<tr><td width='150'>"+items[i]+"</td><td><a href='javascript:;' onclick='remNum("+i+")'><img src='searchAssets/img/delete.png' /></a></td></tr>");
     }

     $('#catalog').append("</table>");

}

なぜこれがうまくいかないのか分かりません。innerHTML で不正行為を試みましたが、問題が発生しました。document.write を使用してみましたが、remNum 関数を使用して Cookie の値を削除し、リストを更新すると、ページ全体が完全に消去されます。

これは、コードを取り出すと、私のテーブルが最終的にどのように見えるかです

<table><tbody><tr><th>Part #</th><th>Delete</th></tr></tbody></table><tr><td width="150">three</td><td><a href="javascript:;" onclick="remNum(0)"><img src="searchAssets/img/delete.png"></a></td></tr>
4

2 に答える 2

3

を使用して、部分的に不正な形式の HTML を追加することはできません。append(). 完全に形成された HTML の断片を追加する必要があります。この行 line$('#catalog').append("<table><tr><th>Part #</th><th>Delete</th></tr>");は有効な HTML の一部にすぎず、それ自体は無効であるため、実際の問題です。

できることは、部分的な HTML の文字列をループに蓄積し、完成した文字列を最後に DOM に 1 回追加するだけです。

または、テーブルの完全に形成された HTML を追加できますが、行はなく、一度に完全な行をループに挿入できます。

あなたができないことは、 append <table>、次にいくつかの行、そして</table>最後に追加することです。append は WHOLE HTML オブジェクトを作成するので、append<table>はブラウザにオブジェクト全体を作成するか、全体を拒否するよう要求します。

たとえば、次のようにできます。

function loopArray() { 
  var cookie = $.cookie("testCookie"); 
  var items = cookie ? cookie.split(/,/) : new Array();
  var html = "<table><tr><th>Part #</th><th>Delete</th></tr>";

  for(var i=0;i<items.length;i++){
     html += "<tr><td width='150'>"+items[i]+"</td><td><a href='javascript:;' onclick='remNum("+i+")'><img src='searchAssets/img/delete.png' /></a></td></tr>";
  }
  html += "</table>";
  $('#catalog').html(html);

}
于 2012-05-16T19:19:22.840 に答える
1

あなたがしていることは間違っています。.appendそのようには機能しません。部分的なコンテンツではなく、完全なタグを追加する必要があります。

あなたの場合、それらを文字列として配置し、最後に追加することをお勧めします。下記参照、

 $('#catalog').empty();
 var tableContent = [];

 tableContent.push("<table><tr><th>Part #</th><th>Delete</th></tr>");

 for(var i=0;i<items.length;i++){
     tableContent.push("<tr><td width='150'>"+items[i]+"</td><td><a href='javascript:;' onclick='remNum("+i+")'><img src='searchAssets/img/delete.png' /></a></td></tr>");
 }

 tableContent.push("</table>");

 $('#catalog').html(tableContent.join('')); //using .html as you had it emptied earlier.
于 2012-05-16T19:22:37.913 に答える