3

我有带有格式的 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');
4

7 回答 7

6

尝试这个

$('div#divOutputWindow table tr td').eq(0).css('width','10px');
$('div#divOutputWindow table tr td').eq(1).css('width','20px');
于 2012-11-21T11:12:41.520 回答
4
  • 循环遍历每个<td>内部的#divOutputWindow.
  • .each();为此，在循环中，您可以通过$(this).
  • 定义最小值和步长，$(this).index();用于计数。
  • 然后使用.css('attr','value');命令来操作你当前的<td>. 它是 css 属性的设置器。别忘了放在"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 已经发布了类似的东西，测试两个例子，我的作品（我测试过）

于 2012-11-21T12:27:42.720 回答
2

您可以使用：

$('#divOutputWindow td').attr('width', 10);
于 2012-11-21T11:24:27.680 回答
2

为什么不使用 CSS3 伪类？

喜欢

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

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

编辑

提琴手

于 2012-11-21T11:05:50.547 回答
2

我认为您对这个效果很好的产品感兴趣：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');
});
于 2012-11-21T11:17:25.463 回答
1

我想这就是你的意思。基本上，循环你<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>

.. 等等

这是一个小提琴

于 2012-11-21T11:15:26.607 回答
0

不过，理想情况下，最好使用 css（伪）类来完成，您可以使用以下代码：

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

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

这是一个工作的jsbin

于 2012-11-21T11:16:53.047 回答