1 
<table border="1">
    <tr><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td></tr>
    <tr><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td></tr>
    <tr><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td></tr>
    <tr><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td></tr>
    <tr><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td></tr>
    <tr><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td></tr>
    <tr><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td></tr>
</table>

http://jsfiddle.net/BUaddD/

入力の幅を設定するだけです。最初の列のすべての入力について、たとえば 30px、2 番目の 50px、3 番目の 20px、最後の 40 px が必要です。すべてのCSSまたはjQueryでこれは可能ですか? 入力ごとにこれを追加する必要がありますか?

4

3 に答える 3

1

以下の CSS は、入力の最初の列の幅を 30 ピクセル、2 番目の列を 50 ピクセル、3 番目の列を 20 ピクセル、最後の列を 40 ピクセルにします。Rory が指摘したように、セレクターはすべてのブラウザーで期待どおりに機能しません。

td:first-child input[type="text"] {
    width: 30px;
}
td:nth-child(2) input[type="text"] {
    width: 50px;
}
td:nth-child(3) input[type="text"] {
    width: 20px;
}
td:last-child input[type="text"] {
    width: 40px;
}

jQuery を使用すると、とにかくこれをエミュレートできます。ここで例を参照してください: http://jsfiddle.net/BUadD/2/

$('td:first-child input[type="text"]').css('width', '30px');
$('td:nth-child(2) input[type="text"]').css('width', '50px');
$('td:nth-child(3) input[type="text"]').css('width', '20px');
$('td:last-child input[type="text"]').css('width', '40px');

そして、それは私にとってIE9で機能しました。

于 2012-04-17T11:29:24.640 に答える
1

次のように入力に追加class="classname"するだけです：

<input class="left_col" type="text">

次に、これを css に追加します。

input.left_col {
    width: 30px;
}

必要なすべての列に対してこれを作成できますが、異なる名前を付けることを忘れないでください。

于 2012-04-17T11:11:37.043 に答える
1

ほとんどのマニピュレータはすべての分野で機能します

$("table input[type=text]").css("width", "30px");

すべての入力フィールドの幅を設定します。最後のフィールドまたは最初のフィールドを操作するには、:first または :last セレクターを使用します。

$("input[type=text]:last").css("width", "30px");

各フィールドにカスタム幅を設定する場合は、「入力 ID」または「入力名」を設定して操作を簡素化することをお勧めします。

$("#id1").css("width", "30px");
$("#id2").css("width", "20px");

たとえば、各フィールドのサイズ* 2などのサイズのアルゴリズムがある場合、Foreachループは適切な選択ではありません。

于 2012-04-17T11:23:12.003 に答える