1

我已经更新了我的例子

我的案例有两个步骤：

1) 用户将从下拉列表中选择建模阶段数。2) 根据用户输入，我使用 .appendTo 方法即时创建 HTML 表格。

除了 IE7，在 chrome、firefox、IE9 上一切顺利。我的一些用户有 IE7，他们不允许更新。所以我必须解决这个问题。非常感谢任何评论。

另一个有趣的事情是我使用 .appendTo() 创建了另一个网页，它在 IE7 中工作。

这是它在 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

您不能像<table>然后单独附加 HTML 片段</table>。您必须附加构成完整对象的整个 HTML 工作片段。

.append()并.appendTo()制作整个 DOM 对象，然后附加这些对象。它们不只是将一些 HTML 附加到 innerHTML 的末尾。

因此，您传递的任何 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 对象。我不确定您希望在哪里插入第二个表，因为您试图将一个表附加到另一个不是合法结构的表。但是，无论如何，这是固定的代码：

$('#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

仅附加整个 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 回答
1

您没有正确使用 DOM/jQuery。DOM（或 jQuery，它是一个混合了其他东西的 DOM 包装器）不能单独操作打开和关闭标签，它只能一起操作它们。如果您将部分 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 回答