Question

美好的一天，

我有一个以一行数据开头的HTML表。每行有一个下拉列表和五个输入文本框。在行的末尾是一个图像，单击该图像将克隆最后一行并删除文本框中的任何数据。客户希望能够根据需要创建任意数量的行。

我有一些javascript / jquery遍历每一行，并根据每个选择/输入控件的name属性动态创建一个对象。此外，我想验证数字字段（浮点数或整数）。这是正常的。问题是当验证失败时，我想在输入文本周围绘制一个红色边框。

这是我的代码：

$("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

Answer 1

可能会或可能不会解决您的问题，但domElement已经是一个jquery对象，所以替换此

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

用这个

domElement.addClass("errorBorder");

Answer 2

我想出了我的答案。我的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>

因此.errorBorder是一个有效的CSS条目，边距：0 auto;不是。因此即使我可以使用addClass来添加样式，但由于“margin：0 auto”，它从未正确呈现。删除后，一切都按照我的预期进行。当我以为我把它移走时，没有意识到我把它粘贴在那里。

jQuery添加css类

2 个答案: