Question

如何使用jquery创建新的数据行？例如，我有一个带有id＆＃34; box＆＃34;我有两个跨度，每个都有＃34;名称＆＃34;和＆＃34;时间＆＃34;。如何将jquery附加到此框中，同时包含名称和时间？我试过试验并尝试了这段代码，但没有用。

$("#button").click(function(){
    $("#box").append(
        $("#name").text("username"),
        $("#time").text("5:00pm")
    ); 
)}

在这段代码中，我希望每次单击按钮时该框都会创建一行新数据。所以如果我想要5行数据，我只需点击按钮5次。

Answer 1

ID必须是唯一的，您需要新的跨度

$("#button").on("click",function() {
  $("#box").append(
    "<br><span>username</span> <span>5:00pm</span>"
  );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<button type="button" id="button">Click</button>
<div id="box"></div>

使用vars，您可以使用模板文字

var cnt=0, 
    data = [{ username: "John", time: "05:00pm" },
            { username: "Paul", time: "07:00pm" }];

$("#button").on("click", function() {
  if (cnt < data.length) {
    $("#box").append(
      `<br><span class="user">${data[cnt].username}</span> <span class="time">${data[cnt++].time}</span>`
    );
  }
});

.user { color:green }
.time { color: red }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<button type="button" id="button">Click</button>
<div id="box"></div>

Answer 2

这是你必须做的事情：

$(document).ready(function() {
    $('#button').click(function(){
       $("#box").append('<br><span>username</span><span>5:00pm</span>')
    })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="box">
  
</div>

<a id="button">button</a>

Answer 3

由于ID必须是@mplungjan提到的唯一ID，假设你有一些css与它们相关联，我只是举例说明一个类而不是ID

$("#button").click(function(){
   $("#main").append(
    $("<div>").addClass("box")
              .append($("<span>").addClass("name").text("username"))
              .append($("<span>").addClass("time").text("5:00PM"))
    ); 
});

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="main"></div>

<button id="button">Click me</button>

正如您所看到的，在使用语法$("<div>")之后，您可以像在jQuery中一样链接。这与@mplungjan所展示的主要区别在于您计划如何动态制作这些内容。如果您计划动态扩展这些div和跨度，那么最好使用它。如果没有，你只想要更少的语法，你宁愿使用他的。

如何使用jquery append（）创建数据行？

3 个答案: