修改

Question

我有格式的html表

<div id="divOutputWindow">
<table>
<tbody>
<tr>
<td>/* Set Width 10 Px */ </td>
<td>/* Set Width 20 Px */ </td>
</tr>
<tr>
/* Same for all tr */
</tr>
</tbody>
</table>
</div>

即。第一个td的宽度为10 px，下一个td为15 px，下一个是td 20 px ...同样

我试过的是

$('#divOutputWindow').find('table').$('tbody > tr > td').css('width', '10px');

Answer 1

试试这个

$('div#divOutputWindow table tr td').eq(0).css('width','10px');
$('div#divOutputWindow table tr td').eq(1).css('width','20px');

Answer 2

在您的<td>内部#divOutputWindow处循环。
使用.each();，在循环中可以访问当前 $(this)的DOM对象。
定义最小值和步长，使用$(this).index();进行计数。
然后使用.css('attr','value');命令来操纵你的当前<td>。它是css属性的setter。不要忘记将"px"放在最后。

守则：

$('#divOutputWindow td').each(function() {
    var min = 10;                                  // Define a minimum
    var step = 5 * $(this).index();                // Define Step(your step is 5 here)
    $(this).css('width', (min + step) + "px");     // css attribute of your <td> width:15px; i.e.
});

有效吗？

编辑：我看到@billyonecan已经发布了类似的内容，测试了两个示例，我的作品（我测试了它）

Answer 3

为什么不使用CSS3伪类？

像

td:first-child
{
    width: 10px;
}

http://reference.sitepoint.com/css/css3psuedoclasses

修改

Jsfiddle

Answer 4

我认为你对这个效果很好的人感兴趣：http://jsbin.com/ojunor/1/edit

$('#divOutputWindow table tr').each(function(){
    $('td:eq(0)',this).attr({"width":"10"}).text('10');
    $('td:eq(1)',this).attr({"width":"20"}).text('20');
});

Answer 5

您可以使用：

$('#divOutputWindow td').attr('width', 10);

Answer 6

我认为这就是你的意思。基本上，循环遍历<td>，并设置相对于元素索引的宽度，例如：

$('#divOutputWindow td').each(function() {
  var step = 5; $td = $(this);
  $td.width(10 + (step * $td.index()));
});

你基本上最终得到：

<tr>
  <td style="width: 10px;"> ... </td>
  <td style="width: 15px;"> ... </td>
  <td style="width: 20px;"> ... </td>
</tr>

..等等

Here's a fiddle

Answer 7

虽然理想情况下最好使用css（伪）类，但您可以使用以下代码：

// Cache the td selector
var $td = $('#divOutputWindow table tr td');

$td.eq(0).width(10);
$td.eq(1).width(20);
...

这是一个有效的jsbin

使用jQuery设置列宽

7 个答案:

修改