如何为每行设置CSS边框？实现每行独立边框的方法

我懂你的需求啦——现在双击提交后两次的结果都挤在同一个边框里，你想要每次提交的内容都有自己独立的边框，分开显示对吧？

先看看你现有代码的问题：你一直在操作同一个.aprovadas元素，每次提交都往这个元素里追加内容，还给它加边框样式，那所有内容自然都在同一个边框容器里了。

要实现每行（每次提交结果）独立边框，我们需要每次提交时创建一个新的容器元素，把当前提交的内容放到这个新容器里，再给这个新容器加上边框样式，最后把它添加到页面中。这样每个提交结果都会是一个独立的带边框的块。

修改后的代码示例如下：

if (data.status.match("Active")) {
  // 创建一个新的div元素作为独立容器
  const resultItem = $("<div>");
  
  // 给这个新容器添加样式
  resultItem.css({
    "border": "2px solid lightblue",
    "color": "black",
    "margin": "10px 0", // 可选：添加上下间距，让各个块更清晰
    "padding": "8px" // 可选：内边距，让内容不贴边框
  });
  
  // 往新容器里添加内容
  resultItem.append(`Username: ${data.username}\npassword: ${data.password}\nstatus: ${data.status}`);
  
  // 把新容器添加到页面的目标位置（比如某个父容器里，这里假设你要放到body里，或者替换成你实际的父选择器）
  $("body").append(resultItem);
}

这里的关键变化是：

• 不再复用同一个.aprovadas元素，而是每次创建新的<div>
• 把样式直接应用到这个新元素上
• 最后将新元素插入到页面中，这样每个提交结果都有自己的边框容器

另外，你原代码里的$(".aprovadas").css("<br><br>")和$(".aprovadas").css("</div>")是错误的用法，css()方法是用来设置CSS样式的，不能用来添加HTML标签，这部分也需要去掉哦。

内容的提问来源于stack exchange，提问作者cinassa