與CSS或jQuery的或許

<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/BUadD/與CSS或jQuery的或許

只需設置寬度我想爲輸入簡單的設置witdh。對於第一列中的所有輸入，我希望例如30px，第二個50px，第三個20px和最後的40px。這可能是CSS或jQuery的所有？我必須爲每個輸入添加這個？

來源

2012-04-17 Ron Forzestering

你可以使用'nnth-child' CSS選擇器來實現這一點，然而它在 2012-04-17 11:11:08

的下面的CSS將使第一欄的輸入30px wid e，第二個50px，第三個20px和最後一個40px。正如Rory所指出的，選擇器在所有的眼睛中都沒有按預期的那樣工作咳嗽IE。

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-17 11:29:24 cchana

只需添加class="classname"的輸入，像這樣：

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

然後添加到您的CSS：

input.left_col { 
    width: 30px; 
}

可以讓這個爲您希望所有列，只記得給他們不同的名字。

來源

2012-04-17 11:11:37 Manuel

這是很多工作;） – 2012-04-17 11:12:56

好，如果你想改變整個列，你只需要改變一次。因此，最終這比將其單獨添加到每個輸入更容易 – Manuel 2012-04-17 11:17:05

大多數操縱所有領域

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

工作將設置寬度爲所有輸入字段。要與去年或先下地幹活，使用方法：先還是：最後一個選擇：

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

如果你想設置自定義寬度爲每個字段，更好的設置「輸入ID」或「輸入名稱」，簡化操作：

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

的foreach循環是不適合你比如良好的choise，如果你有大小的算法，例如尺寸* 2的每個字段，比你可以用它

來源

2012-04-17 11:23:12 DEgITx

如果您要儘可能爲每個字段設置ID，那麼我會避免通過jQuery爲每個CSS應用CSS，只需將其放入CSS文件中即可。 – cchana 2012-04-17 12:09:49

與CSS或jQuery的或許

回答

相關問題