gpt4 book ai didi

jquery - .appendTo() 在 IE7 中不起作用

转载 作者:行者123 更新时间:2023-12-01 06:19:57 25 4
gpt4 key购买 nike

我更新了我的示例

我的案例有两个步骤:

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

除了 IE7 之外,在 chrome、firefox、IE9 上一切正常。我的一些用户使用的是IE7,但不允许他们更新。所以我必须解决这个问题。非常感谢任何评论。

另一个有趣的事情是我使用 .appendTo() 创建了另一个 webpage ,适用于 IE7。

这是一个示例 looks在 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');

})​

最佳答案

您无法附加 HTML 片段,如 <table>然后分别</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/

关于jquery - .appendTo() 在 IE7 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12183721/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com