我的案例有两个步骤:
1)用户将从下拉列表中选择建模阶段数。 2)根据用户输入,我使用.appendTo方法动态创建HTML表。
除了IE7之外,chrome,firefox,IE9上的一切都很顺利。我的一些用户拥有IE7,不允许更新。所以我必须解决这个问题。非常感谢任何评论。
以下是Chrome和IE9中looks的示例
以下是我的代码:
HTML code:
<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');
})
答案 0 :(得分: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/
答案 1 :(得分: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");
答案 2 :(得分: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。