2014-07-09 232 views
0

表Css屬性不對齊,如果我在jQuery中給CSS。 首先,我在這裏只給的Html動態表Css屬性使用jQuery

<tr id="trCustomLabel"> 
<td class="font12" style="border: 0px; width: 8%;padding-left: 10px;" id="tdlab">Custom Label</td> 
<td class="font11" style="border: 0px; text-align: center; width: 2%;" id="tdlab1">:</td> 
<td class="font12" style="border: 0px; padding-top: 0px; width: 55%;" id="tdlab2"> <div><input type="checkbox" id="chkRestoreLocation"/> Create new label for restore</div></td> 
</tr> 

後,我在jQuery的controling元素

if (currentID == "tabGmail") {$('tr[id$=trCustomLabel]').css("display", "block");} 
if (currentID == "tabDrive") { $('tr[id$=trCustomLabel]').css("display", "block");} 
if (currentID == "tabContact") {$('tr[id$=trCustomLabel]').css("display", "none");} 

輸出: enter image description here

+1

,最好添加一個動態類,而不是實際的CSS的 – yuvi

+0

@Michiel是的,我如果你只是想隱藏和顯示元素,然後使用'.hide()'和'.show()'函數 – arun

回答

0

請這改變了你的代碼。

if (currentID == "tabGmail") { 
     $('tr#trCustomLabel').css("display", "block"); 
    } 
    if (currentID == "tabDrive") { 
     $('tr#trCustomLabel').css("display", "block"); 
    } 
    if (currentID == "tabContact") { 
     $('tr#trCustomLabel').css("display", "none"); 
    } 
+1

。 。 – amol

+0

或'toggle()'來控制元素,而標籤單擊它將錯誤對齊 – yuvi

0
switch (currentID) { 
    case tabGmail: 
     $('tr#trCustomLabel').css("display", "block"); 
     break; 
    case tabDrive: 
     $('tr#trCustomLabel').css("display", "block"); 
     break; 
    case tabContact: 
     $('tr#trCustomLabel').css("display", "none"); 
     break; 
} 
0

我要去的肢體和猜你有一堆的控制錶行的顯示按鈕。我還假設trCustomLabel是一個佔位符(因爲你不是真的在不同的時間使用同一個id,對嗎?這有點違背了id的意思,如果你想要定位一些不同的元素,可以使用一個類)。

爲了減少代碼行,也讓它稍微更通用的,我建議你做這樣的:

// define what points to where 
var controllers = { 
    'tabGmail' : 'trGmailLabel', 
    'tabDrive' : 'trDriveLabel', 
    'tabContact': 'trContactLabel' 
} 

// toggle the required element 
if (controllers.hasOwnProperty(currentID)) { 
    $('tr#' + controllers[currentID]).toggle(); 
}