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类

回答

相关问题