Question

我有一个表，我正在动态插入一个新行。它仅包含在td上。但它只占{t}宽度的一个宽度here 如何使新插入的tr占据表格的总宽度。

 Here number of td s are not fixed.That is, it is not always 3.

这是我的HTML

<table>
    <tr><td>1</td><td>2</td><td>3</td></tr>
    <tr id='a'><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>7</td><td>8</td><td>9</td></tr>
</table>

这是我的代码

$('<tr id="b" style="background-color:blue"><td >new</td></tr>').insertBefore($('#a'));

此处还有fiddle可以动手..

Answer 1

total_td = $('table tr:first td').length;

$('<tr id="b" style="background-color:blue"><td colspan="' + total_td  + '">new</td></tr>').insertBefore($('#a'));

Answer 2

向colspan元素添加<td>：

$('<tr id="b" style="background-color:blue"><td colspan="3">new</td></tr>').insertBefore($('#a'));

http://jsfiddle.net/WAuw4/5/

修改

如果您不知道表格中的单元格数量：

var colspan = $('#a td').length; $('<tr id="b" style="background-color:blue"><td colspan="' + colspan + '">new</td></tr>').insertBefore($('#a'));

Answer 3

您可以在新的colspan=3

中添加td

$('<tr id="b" style="background-color:blue"><td colspan=3>new</td></tr>').insertBefore($('#a'));

示例：http://jsfiddle.net/WAuw4/4/

以下是colspan属性的更多内容：http://reference.sitepoint.com/html/td/colspan

修改

根据您的评论

但<td>的数量并不总是固定的。

我会这样做

检查第一行中td的数量。将其添加到您的colspan

var len = $('tr:first td').length; $('<tr id="b" style="background-color:blue"><td colspan=' + len + '>new</td></tr>').insertBefore($('#a'));

示例： http://jsfiddle.net/WAuw4/7/

Answer 4

像这样插入colspan="3"

$('<tr id="b" style="background-color:blue"><td colspan="3">new</td></tr>').insertBefore($('#a'));

Answer 5

使用Colspan调整行中td的范围。

$('<tr id="b" style="background-color:blue"><td `colspan="3"` >new</td></tr>').insertBefore($('#a'));

我已经检查过你jsfiddle ..

你应该有<td>的固定或可预测的数量，否则你如何管理这个...如果你想在<td>使用<div>的地方实施这种方法

如何使新插入的标记占据表的总宽度

5 个答案: