我正在使用一个HTML表格,但是我想根据浏览器的大小动态地改变表格的布局。我的基本代码是这样的:
<tr>
<td class="row">E1</td>
<td class="row">E2</td>
<td class="row">E3</td>
<td class="lastRow">E4</td>
</tr>
然后JQuery应该计算行数并相应地插入换行符。我的JQuery现在看起来是这样的:
$('td.row').append('</tr><tr>');
然而,它仍然在一行中显示所有元素。知道为什么吗?
这是使用流畅CSS布局的完美地方。
与其编写大量疯狂的dom操纵javascript,不如简单地将TD
标记替换为divs
,并将其命名为float:left
进一步- append
不做你认为它做什么。这是dom
操作,而不是字符串操作-你不能用它来直接改变HTML的方式,你的想法。
试着看看。after();功能:
http://api.jquery.com/after我认为你需要尝试使用这个选择器
假设你的表有一个名为example
的id,试试这样
$("#exmaple tr:last").append('<tr></tr>');
$('</tr><tr>').insertAfter('.row');
您需要在tr元素上执行追加操作,而不是在td.row
您需要从构造HTML标记的角度考虑而不是。没有办法将关闭/打开</tr><tr>
拼接到DOM中(没有一些丑陋的.innerHTML
hack)。
相反,在当前行之后创建新行,并将单元格重新定位到新行中。
var row_cells = $('td.row').slice(1);
row_cells.each( function( i, el ) {
$('<tr>').insertAfter( row_cells.eq(i).parent() )
.append( row_cells.eq(i) );
});
演示:http://jsfiddle.net/EDf5a/
或者您想为每个单元格创建新行:
var row_cells = $('td.row');
var row = row_cells.parent();
row_cells.each(function(i, el) {
$('<tr>').insertBefore(row)
.append(row_cells.eq(i));
});
演示:http://jsfiddle.net/EDf5a/1/