Question

我有带数据的表，并且我需要 td：eq（4）更改类，以及用于baghround的框。

我有此代码：

func returnView(text1: String, text2: String) -> UIView {

    let fullView = UIView()

    fullView.backgroundColor = UIColor(red:0.82, green:0.83, blue:0.85, alpha:1.0)
    fullView.translatesAutoresizingMaskIntoConstraints = false
    let firstButton = UIButton()
    firstButton.translatesAutoresizingMaskIntoConstraints = false
    let secondButton = UIButton()
    secondButton.translatesAutoresizingMaskIntoConstraints = false
    let thirdTextView = UITextView()
    thirdTextView.translatesAutoresizingMaskIntoConstraints = false
    thirdTextView.text = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book."
    thirdTextView.backgroundColor = .clear
    thirdTextView.isScrollEnabled = false

    firstButton.setTitle("Button1", for: .normal)
    firstButton.setTitleColor(.black, for: .normal)
    firstButton.titleLabel?.font = UIFont.systemFont(ofSize: 15, weight: UIFont.Weight.medium)
    firstButton.contentHorizontalAlignment = .left

    secondButton.setTitle("Button2", for: .normal)
    secondButton.setTitleColor(.black, for: .normal)
    secondButton.titleLabel?.font = UIFont.systemFont(ofSize: 15, weight: UIFont.Weight.medium)
    secondButton.contentHorizontalAlignment = .right

    let descriptionBarStackView =  UIStackView(arrangedSubviews: [firstButton, UIView() ,secondButton])
    descriptionBarStackView.translatesAutoresizingMaskIntoConstraints = false
    descriptionBarStackView.axis = .horizontal
    descriptionBarStackView.alignment = .fill

    let viewWithStackViews = UIStackView(arrangedSubviews: [descriptionBarStackView, thirdTextView])
    viewWithStackViews.translatesAutoresizingMaskIntoConstraints = false
    viewWithStackViews.axis = .vertical
    viewWithStackViews.layoutMargins = UIEdgeInsets(top: 15, left: 10, bottom: 10, right:10)
    viewWithStackViews.isLayoutMarginsRelativeArrangement = true
    fullView.addSubview(viewWithStackViews)

//        view.addSubview(fullView)

    fullView.leadingAnchor.constraint(equalTo: viewWithStackViews.leadingAnchor).isActive = true
    fullView.trailingAnchor.constraint(equalTo: viewWithStackViews.trailingAnchor).isActive = true
    fullView.topAnchor.constraint(equalTo: viewWithStackViews.topAnchor).isActive = true
    fullView.bottomAnchor.constraint(equalTo: viewWithStackViews.bottomAnchor).isActive = true

    fullView.widthAnchor.constraint(equalTo: view.widthAnchor, constant: -10).isActive = true
    fullView.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
    fullView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true

    fullView.layer.cornerRadius = 5

    return fullView
}

如果在这个td时我的价值大于1，我会添加bg红色框。

但是诺克斯，出了点问题。

Answer 1

在没有看到您的html的情况下，我只能根据您的代码猜测其外观，但是请尝试以下操作：

$('tr').each(function() {
  var rowCol = $(this);
  rowCol.find('td:eq(4)').each(function() {
    var mytd = $(this);
    var rowValue = parseFloat($(this).text());
    console.log(rowValue === 0)
    if (rowValue > 1) {
      mytd.addClass('def').removeClass('defects');
    } else {
      mytd.addClass('defects').removeClass('def');
    }
  });
});

首先，我将您的td:eq(4)分配给变量var mytd = $(this);。
然后我将$('.defects')替换为mytd

代码

$('tr').each(function() {
  var rowCol = $(this);
  rowCol.find('td:eq(4)').each(function() {
    var mytd = $(this);
    var rowValue = parseFloat($(this).text());
    console.log(rowValue === 0)
    if (rowValue > 1) {
      mytd.addClass('def').removeClass('defects');
    } else {
      mytd.addClass('defects').removeClass('def');
    }
  });
});

.defects {
  background: #e74c3c;
  color: #fff;
  padding: 3px;
  border-radius: 6px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>0</td>
    <td>6</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
</table>

您可以运行上面的演示并查看结果。

jQuery如何更改每个表数据行的类？

1 个答案: