この質問の背後にある動機は、以下の jQuery スニペットが失敗する理由を理解することです。
注:ばかげた盲目的な試行錯誤の力により、機能する(または機能するように見える)代替コードを見つけました。したがって、この質問の目的は、(それ自体) 以下に示す問題を「修正」することではありません。むしろ、私の目標は、なぜ失敗したのかをできる限り理解することです。
jQuery(document).ready(function ($) {
var tds = [];
for (var i = 0; i < 3; ++i) {
var td = $('<td>');
tds.push(td);
}
var $tds = $(tds);
var $row1 = $('#row1');
$tds.appendTo($row1);
});
基本的に、スニペットの目的は、3 つの (jQuery でラップされた)td
要素を作成し、それらを既存の に追加することtr
です。(この投稿の最後に、完全な HTML+CSS+JS コードをコピーします。)
前に述べたように、私の目標は、このスニペットが失敗する理由を理解することです。したがって、この質問は主に、コードを実行せずにスニペットが失敗することをすでに確認できる人に向けられています。そうすることができる人たちへ:あなたの理由は何ですか?スニペットが機能しないことを正確に示すものは何ですか?
完全なコードは次のとおりです。
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<meta charset="utf-8">
<style>
td{width:100px;height:20px;background:#C40000}
</style>
</head>
<body>
<table>
<tr id="row1"></tr>
</table>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
jQuery(document).ready(function ($) {
var tds = [];
for (var i = 0; i < 3; ++i) {
var td = $('<td>');
tds.push(td);
}
var $tds = $(tds);
var $row1 = $('#row1');
$tds.appendTo($row1);
});
</script>
</body>
</html>