1

JavaScriptのinnerHTMLプロパティを使用してDIV内にテーブルを作成しています

listing.innerHTML += '<table> <tr><td><img src='+ pic + friends[a].split("|")[1] + '/picture"' + ' class="pic" /></td>'; 

listing.innerhtml += '<td class="name">' + friends[a].split("|")[0] + "</td>";

listing.innerHTML += "<td><button id='add' onclick=write() /> </td> </tr> </table>";

ID'listing'のdivには、コンテンツはテーブルタグなしで書き込まれます<td> </td> </tr> <tr>。

つまり、必要なコンテンツは表示されますが、HTMLテーブルとしてフォーマットされていません。ブラウザでソースを見ると、同じもののTRタグとTDタグ、およびクロージャタグがありません。Chromeを使用しています。

4

3 に答える 3

1

問題は、コンテンツを innerHTML に追加するたびに DOM が更新され、ブラウザが閉じられていないものを閉じ<table>てしまうことです。

HTML全体を生成してから、すぐにinnerHTMLに追加することをお勧めします:

var myhtml = "";
myhtml += '<table> <tr><td><img src="'+ pic + friends[a].split("|")[1] + '/picture"' + ' class="pic" /></td>'; 
myhtml += '<td class="name">' + friends[a].split("|")[0] + "</td>";
myhtml += "<td><button id='add' onclick='write()' /> </td> </tr> </table>";
listing.innerHTML += myhtml;

注:また、一致する引用符ですべての属性値を囲んでいることを確認してください (二重または単一のいずれかですが、一致する必要があります)。引用符のない属性値はサポートされていませんが、機能する場合があります。

于 2012-11-09T16:43:51.470 に答える
0 
var tbl = '<table> <tr><td><img src='+ pic + friends[a].split("|")[1] + '/picture"' + ' class="pic" /></td>';
tbl += '<td class="name">' + friends[a].split("|")[0] + "</td>";
tbl += "<td><button id='add' onclick=write() /> </td> </tr> </table>";

listing.innerHTML += tbl;
于 2012-11-09T16:44:23.897 に答える
0

ページのソースを表示したときに行っている変更が表示されないということであれば、それで問題ありません。これは、DOM で JS を介して行っている変更から更新されていないためです。

Firefox/Firebug の使用をご覧ください

HTML を検査し、スタイルとレイアウトをリアルタイムで変更します。

于 2012-11-09T16:42:36.000 に答える