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

  • Z时代
  • 2024-01-10
  • 分类：问答

如何使用jquery创建新的数据行？例如，我有一个ID为“盒子”的div，我有两个跨度分别为“name”和“time”的ID。 我如何让jquery追加到名称和时间都在这个框中？我尝试了试验并尝试了这些代码，但没有奏效。如何使用jquery append（）创建数据行？

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

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

回答：

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>

随着增值经销商，您可以使用文字模板

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>

回答：

这是你必须怎么做： 

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

回答：

由于作为@mplungjan提到的，假设你有一些CSS与他们联系ID必须是唯一的，我只会给一个例子类而不是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和span，您最好使用它。如果不是，你只需要较少的语法，你可以使用他的。

以上是 如何使用jquery append（）创建数据行？ 的全部内容， 来源链接： utcz.com/qa/259832.html

回到顶部