jQuery添加css類

-1

我有一個以一行數據開頭的HTML表格。每行有一個下拉菜單和五個輸入文本框。在行的末尾是一個圖像，點擊時將克隆最後一行並刪除文本框中的任何數據。客戶希望能夠根據需要創建儘可能多的行。

我有一些JavaScript/jQuery循環徹底的每一行，並根據每個選擇/輸入控件的名稱屬性動態創建一個對象。此外，我想驗證數字字段（浮點數或整數）。這是正常工作。問題是驗證失敗時，我想在輸入文本週圍繪製紅色邊框。

這裏是我的代碼：

$("input.submit").on('click', function(e) { 
 

 
    var billingDetailRows = []; 
 
    var detailRows = []; 
 
    $('.miBillingDetails tbody tr').each(function(i, row) { 
 

 
    // http://stackoverflow.com/questions/9132347/iterating-through-table-cells-using-jquery 
 
    // The 'this' is necessary to ensure you only iterate through the row you're currently on 
 
    var detailRow = {}; 
 
    var isNumeric = false; 
 
    var dataType = ''; 
 
    $('td', this).each(function(e) { 
 
     var domElement = $(this).find(':input'); 
 
     var attrName = ''; 
 
     if (typeof domElement != 'undefined') { 
 
     attrName = domElement.attr('name'); 
 
     if (typeof attrName != 'undefined') 
 
      console.log(attrName); 
 
     } 
 

 
     var dataType = domElement.attr('data-type'); 
 
     if (typeof dataType != 'undefined') { 
 
     isNumeric = dataType === 'numeric'; 
 
     dataType = domElement.attr('data-format'); 
 
     } 
 

 
     var value = $(this).find(':input').val(); 
 
     if (typeof value != 'undefined') { 
 
     console.log(value === '' ? 'NONE' : value); 
 
     var actualValue = value === '' ? '' : value; 
 

 
     if (isNumeric && actualValue.length > 0) { 
 
      if (!validateNumber(actualValue, dataType === 'int')) { 
 
      $(domElement).css({ 
 
       "border-color": "#FF0000", 
 
       "border-width": "1px", 
 
       "border-style": "solid" 
 
      }); 
 
      // $(domElement).addClass("errorBorder"); 
 
      } 
 
     } 
 

 
     detailRow[attrName] = actualValue; 
 
     } 
 
    }); 
 

 
    detailRows.push(detailRow); 
 
    }) 
 
});

.errorBorder { 
 
    thin solid #FF0; 
 
}

<table class="miBillingDetails"> 
 
    <tr> 
 
    <td> 
 
     <select name="RevenueType"> 
 
     <option value="Cash">Cash</option> 
 
     <option value="CC">Credit Card</option> 
 
     <option value="Visa">Visa</option> 
 
     </select> 
 
    </td> 
 
    <td> 
 
     <input type="text" name="BillingRate" data-type="numeric" data-format="float"> 
 
    </td> 
 
    <td> 
 
     <input type="text" name="Quantity" data-type="numeric" data-format="int"> 
 
    </td> 
 
    <td> 
 
     <input type="text" name="FlatRate" data-type="numeric" data-format="float"> 
 
    </td> 
 
    <td> 
 
     <input type="text" name="SequenceStart"> 
 
    </td> 
 
    <td> 
 
     <input type="text" name="SequenceEnd"> 
 
    </td> 
 
    <td> 
 
     <img class="cloneWars" src="images/add2.jpg" alt="Add Tag" /> 
 
    </td> 
 
    </tr> 
 
</table>

的問題，我想用addClass/removeClass。但無論如何，這是行不通的。我必須設置CSS才能工作。

我在做什麼錯？

TIA，

COSON

來源

2015-10-06 coson

你還試過''domElement.addClass（「errorBorder」）;''？ –

您確定您有該規則的有效css定義嗎？對我來說似乎不是這樣 –

@BettySt他有這樣的評論，我相信他已經試過 – stackoverfloweth

可能會或可能不會解決你的問題，而是一個DOMElement已經是一個jQuery對象，所以這個

domElement.addClass("errorBorder");

來源

2015-10-06 19:13:59 stackoverfloweth

我也試過，但沒有去:( – coson

用jQuery對象調用'$（）'會返回一個jQuery對象的副本，它可以工作，但效率不高。 – Barmar

我更換此

$(domElement).addClass("errorBorder");

想出我的答案是什麼。我的CSS沒有正確定義：

<style type="text/css"> 
    input { width: 125px; } 
    .center { margin-left: auto; margin-right: auto; } 
    margin:0 auto; /* BAD FORMAT */ 
    .errorBorder { 
     border: thin solid #F00; 
    } 
</style>

所以while .errorBorder是一個有效的CSS條目，邊距：0 auto;不是。所以，即使我可以使用addClass添加樣式，由於「margin：0 auto」，它永遠不會正確渲染。在我刪除這個之後，一切都按照我預期的方式工作。沒想到我把它粘貼在那裏，當我以爲我把它刪除了。

來源

2015-10-06 21:57:01 coson

jQuery添加css類

回答

相關問題