如何使用jquery append（）創建數據行？

如何使用jquery創建新的數據行？例如，我有一個ID爲「盒子」的div，我有兩個跨度分別爲「name」和「time」的ID。我如何讓jquery追加到名稱和時間都在這個框中？我嘗試了試驗並嘗試了這些代碼，但沒有奏效。如何使用jquery append（）創建數據行？

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

在這段代碼中，我希望盒子每次點擊按鈕時都會創建一個新的數據行。所以如果我想要5行數據，我只需點擊5次按鈕。

來源

2017-12-03 gohn

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>

來源

2017-12-03 07:07:45 mplungjan

謝謝！這正是我正在尋找 – gohn

是模板文字的一部分js或jquery？ –

這是JS：https：//developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals – mplungjan

這是你必須怎麼做：

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

來源

2017-12-03 07:10:08 shahabvshahabi

嘿傢伙我沒有任何問題與你的話，但是當我試圖讓你發佈你的答案....我應該在哪裏知道你回答了？ – shahabvshahabi

由於作爲@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，您最好使用它。如果不是，你只需要較少的語法，你可以使用他的。

來源

2017-12-03 07:15:13

如何使用jquery append（）創建數據行？

回答

相關問題