javascript - Javascript コードからセル幅 (HTML テーブル) を設定する方法

Question

HTMLテーブルがあります。そのテーブルのセルの 1 つの幅を 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

一般的な JavaScript ライブラリである jQuery を使用してそれを行う方法を次に示します。

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')タグセレクタです。すべての td 要素が選択されます。
3. .css() は、言及したスタイル ルールを適用します。