1

例を更新しました

私のケースには2つのステップがあります：

1) ユーザーは、モデル化された段階の数をドロップダウン リストから選択します。2) ユーザーの入力に基づいて、.appendTo メソッドを使用してその場で HTML テーブルを作成しています。

IE7を除くすべてがクロム、ファイアフォックス、IE9でうまくいきます。多くのユーザーが IE7 を使用しており、更新が許可されていません。したがって、この問題を修正する必要があります。コメントをいただければ幸いです。

もう 1 つの興味深い点は、IE7 で動作する.appendTo() を使用して別のwebpageを作成したことです。

Chrome と IE9 での表示例を次に示します。

以下は私のコードです：

HTML コード:

<div class="articles">
<table align="center">
<tr><th><label for="id_S">Number of modeled stages:</label></th><td><select name="S" id="id_S">
<option value="">Please choose</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select></td></tr>
</table></div>

JavaScript コード:

$(".articles").find('table').addClass('table');

$('#id_S').change(function() {
    $('.leslie').remove();
    $('.no').remove();
    var total = $(this).val()
    $('<table class="leslie" border="0" align="center"><tr><th width="5" colspan=' + total + '>Lesile Matrix:</th></tr>').appendTo('.table');

    i = 0
    while (i < total) {
        $('<tr>').appendTo('.leslie')

        var j = 0
        while (j < total) {
            $('<td><input type="text" size="5" name="a' + i + '' + j + '" value="0" id="id_a' + i + '' + j + '"/></td>').appendTo('.leslie tr:last')
            j = j + 1
        }

        $('</tr>').appendTo('.leslie')
        i = i + 1
    }
    $('</table>').appendTo('.leslie');


    $('<table class="no" border="0" align="center"><tr><th width="5">Initial Number:</th></tr>').appendTo('.leslie');

    q = 0
    while (q < total) {
        $('<tr><td><input type="text" size="5" name="no' + q + '" value="0" id="id_a' + q + '"/></td></tr>').appendTo('.no')
        q = q + 1
    }
    $('</table>').appendTo('.no');

})​
4

3 に答える 3

7

のように HTML の一部を追加して<table>から、別々に追加することはできません</table>。完全に形成されたオブジェクトを作成する HTML の作業部分全体を追加する必要があります。

.append().appendTo()DOM オブジェクト全体を作成し、それらを追加します。innerHTML の末尾に HTML を追加するだけではありません。

したがって、渡す HTML はすべて.appendTo()、完全に形成された HTML オブジェクト (テーブル全体または行全体など) でなければなりません。

自分で HTML 文字列を作成し、それを一度に追加できます。

var html = '<table class="leslie" border="0" align="center"><tr><th width="5">Lesile Matrix:</th></tr>';
html += '<tr><td><input type="text" size="5" name="a" value="0" id="id_a"/></td></tr>';
html += '</table>';
$(html).appendTo(document.body);

わかりました。HTML とコードを取得し、適切な HTML オブジェクトを作成するようにコードを書き直しました。あるテーブルを別のテーブルに追加しようとしていたため、2 番目のテーブルを挿入する場所がわかりませんでしたが、これは正当な構造ではありません。しかし、いずれにせよ、修正されたコードは次のとおりです。

$('#id_S').change(function() {
    // remove previous tables
    $('.leslie').remove();
    $('.no').remove();

    // construct 2-D table that is total x total in size
    var total = $(this).val()
    var newTable = $('<table class="leslie" border="0" align="center"><tr><th width="5" colspan=' + total + '>Lesile Matrix:</th></tr></table>');

    var i = 0;
    while (i < total) {
        // create new row
        var newRow = $('<tr>').appendTo(newTable);

        var j = 0;
        while (j < total) {
            // create new cell and append it to the current row
            $('<td><input type="text" size="5" name="a' + i + '' + j + '" value="0" id="id_a' + i + '' + j + '"/></td>').appendTo(newRow);
            j = j + 1;
        }
        // add this row to the table
        newRow.appendTo(newTable);
        i = i + 1;
    }
    // add the fully formed table to the document
    newTable.appendTo('.table');

    // create out second table
    newTable = $('<table class="no" border="0" align="center"><tr><th width="5">Initial Number:</th></tr></table>');

    var q = 0;
    while (q < total) {
        // create a new row and add it to the new table
        $('<tr><td><input type="text" size="5" name="no' + q + '" value="0" id="id_a' + q + '"/></td></tr>').appendTo(newTable);
        q = q + 1;
    }
    // add this fully formed table to the document
    newTable.appendTo(".table");

})​

そして、これはIE7でも動作する動作デモです: http://jsfiddle.net/jfriend00/35ZNF/

または、HTML を文字列に構築し、HTML を一度に追加する単純なバージョンを次に示します。

$('#id_S').change(function() {
    // remove previous tables
    $('.leslie').remove();
    $('.no').remove();
    var total = $(this).val()

    // construct 2-D table that is total x total in size
    var html = '<table class="leslie" border="0" align="center"><tr><th width="5" colspan=' + total + '>Lesile Matrix:</th></tr>';
    for (var i = 0; i < total; i++) {
        html += '<tr>';
        for (var j = 0; j < total; j++) {
            html += '<td><input type="text" size="5" name="a' + i + '' + j + '" value="0" id="id_a' + i + '' + j + '"/></td>';
        }
        html += '</tr>';
    }
    html += "</table>";
    $(".table").append(html);

    // create our second table
    html = '<table class="no" border="0" align="center"><tr><th width="5">Initial Number:</th></tr>';
    for (var q = 0; q < total; q++) {
        html += '<tr><td><input type="text" size="5" name="no' + q + '" value="0" id="id_a' + q + '"/></td></tr>';
    }
    html += '</table>';
    $(".table").append(html);
})​

このバージョンの動作デモ: http://jsfiddle.net/jfriend00/qMnZV/

于 2012-08-29T18:01:18.703 に答える
1

DOM/jQuery を正しく使用していません。DOM (または、他の要素を組み合わせた DOM ラッパーである jQuery) は、開始タグと終了タグを別々に操作することはできず、一緒にしか操作できません。部分的な HTML を jQuery に渡すと、DOM API を使用して DOM オブジェクトが構築されます。あなたの場合、IE7 DOM は部分的な HTML の意味を理解できません。

以下が機能するはずです。

<script type="text/javascript" src=" ../stylesheets/jquery-1.7.2.js"></script> 
<script>
$('<table class="leslie" border="0" align="center"><tr><th width="5">Lesile Matrix:</th></tr></table>').appendTo('.table');         
$('<tr>').appendTo('.leslie');
$('<td><input type="text" size="5" name="a" value="0" id="id_a"/></td>').appendTo('.leslie tr:last');
</script>

前提として、$(...)HTML で呼び出す場合は、常に有効な HTML を渡す必要があります。

于 2012-08-29T18:04:24.927 に答える
1

html 要素全体のみを追加します。

$('<table class="leslie" border="0" align="center"><tr><th width="5">Lesile Matrix:</th></tr></table>').appendTo('.table');         
$('<tr><td><input type="text" size="5" name="a" value="0" id="id_a"/></td></tr>').appendTo('.leslie');

不明な数の行を追加する必要がある場合は、代わりに次のようにします。

var strHTML = '<table class="leslie" border="0" align="center"><tr><th width="5">Lesile Matrix:</th></tr>';
// simulate a loop adding rows
for (var i = 0; i < 6; i++) {
    strHTML += '<tr><td><input type="text" size="5" name="a" value="0" id="id_a"/></td></tr>';
}

$($.parseHTML(strHTML)).appendTo(".table");
于 2012-08-29T18:00:34.203 に答える