如何從Javascript代碼中設置單元格寬度（HTML表格）

Question

我有一個HTML表格。我如何從javascript代碼中更改該表格的一個單元格的寬度？例如，我有一個按鈕，當我按下它時，我想要改變一個特定列的寬度。我怎樣才能做到這一點？

Answer 1

這裏是你會如何使用jQuery，一個流行的JavaScript庫做到這一點：

http://jsfiddle.net/VJTnN/2

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

Answer 2

使用CSS方法來應用的寬度。

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

解釋：

1. 獲取所有td元素。並應用CSS屬性寬度並將其值設置爲200px。爲每個td元素。
2. $('td')是tagSelector。它會選擇所有的td元素。
3. .css（）將應用您提到的樣式規則。

Answer 3

你可以做到這一點沒有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'; 
}