jQuery 使用jQuery设置列宽

set column width using jQuery

提问by Shaggy

I have html table with format

我有格式的 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>

i.e. first td has width 10 px next td 15 px next td 20 px...likewise

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

What i Tried is

我试过的是

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

采纳答案by Munchies

• Loop trough each <td>inner your #divOutputWindow.
• Use .each();for that, in the loop you can acces the current DOM-object by $(this).
• Define a minimum and a stepsize, use $(this).index();for counting.
• Then use the .css('attr','value');command to manipulate your current <td>. It's a setter of the css attribute. Don't forget to put "px"at the end.

• 循环遍历每个<td>内部您的#divOutputWindow.
• 使用.each();的，在循环中，您可以存取权限由当前的DOM对象$(this)。
• 定义一个最小值和一个步长，$(this).index();用于计数。
• 然后使用该.css('attr','value');命令来操作您当前的<td>. 它是 css 属性的 setter。别忘了放在"px"最后。

The Code:

编码：

$('#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.
});

Did it work?

它起作用了吗？

Edit: i saw that @billyonecan already posted something similar, test both examples, mine works (i tested it)

编辑：我看到@billyonecan 已经发布了类似的东西，测试两个例子，我的作品（我测试过）

回答by Ankush Jain

try this

尝试这个

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

回答by Jai

I think you are interested in this one which is working great: http://jsbin.com/ojunor/1/edit

我认为您对这个运行良好的感兴趣：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');
});

回答by user1795109

You can use:

您可以使用：

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

回答by Ron van der Heijden

Why dont you use the CSS3 pseudo classes?

为什么不使用 CSS3 伪类？

Like

喜欢

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

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

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

Edit

编辑

Jsfiddle

提琴手

回答by billyonecan

I think this is what you meant. Basically, loop over your <td>'s, and set the width in relation to the element index, eg:

我想这就是你的意思。基本上，遍历您的<td>'s，并设置与元素索引相关的宽度，例如：

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

You basically end up with:

你基本上最终得到：

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

.. and so on

.. 等等

Here's a fiddle

这是一把小提琴

回答by Abhilash

Though, ideally this is best done with css (pseudo-)classes, you can use this code:

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

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

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

Here's a working jsbin

这是一个有效的jsbin