如何从Javascript代码设置单元格宽度（HTML表）

Question

我有一个HTML表格。如何从Javascript代码更改该表的一个单元格的宽度？例如，我有一个按钮，当我按下它时，我希望更改一个特定列的宽度。我怎么能这样做？

Answer 1

你可以在没有jQuery的情况下做到这一点。

工作示例：http://jsfiddle.net/qFDBk/1/

var btn = document.getElementById('btn');

btn.onclick = function() {
    var tbl = document.getElementById('tbl');
    var td = tbl.rows[0].cells[0];
    td.width = '500px';
    td.style.backgroundColor = 'blue';
}

Answer 2

以下是使用jQuery（一种流行的JavaScript库）的方法：

http://jsfiddle.net/VJTnN/2

$('td:nth-child(2)').css('width', '100px');

Answer 3

使用CSS方法应用宽度。

$('td').css('width','200px');

解释：

1. 获取所有td元素。并应用CSS属性宽度并将其值设置为200px。对于每个td元素。
2. $('td')是tagSelector。它将选择所有td元素。
3. .css（）将应用您提到的样式规则。