如何添加多個HTML標籤與jQuery？

我在學習jQuery我仍然有一些DOM的問題。我有一個表，其中包含3行，每行有5個內容。我需要添加第四行及其各自的內容。這裏是我的代碼在這裏輸入的代碼如何添加多個HTML標籤與jQuery？

<table> 
    <tr> 
    <td>content</td> 
    <td>content</td> 
    <td>content</td> 
    <td>content</td> 
    </tr> 
<table>

以上是怎樣的表應該做下面是我的jQuery代碼

var arrayContent = ['Content1','Content2','Content3','Content4','Content5']; 

$('table').append(function(){ 
    return $('<tr>').append(function(){ 
    for(var i = 0; i < arrayContent.length; i++){ 
      return $('<td>') 
    } 
    }) 
})

所以這個代碼居留權只加一個標籤的例子，我需要增加更多到我的頁面。有誰知道我可以改進或建議新的方式來做到這一點？

來源

2015-11-22 Italo Lemos

在'arrayContent'的報價是不正確的。 –

謝謝。我修復它。 –

// comments inline

var arrayContent = ['Content1','Content2','Content3','Content4','Content5']; 
 

 
$('table').append(function(){ 
 
    return $('<tr>').append(function(){ 
 
    var td = ''; // create an empty string 
 
    for(var i = 0; i < arrayContent.length; i++){ 
 
     td += '<td>' + arrayContent[i] + '</td>'; // compose the table data 
 
    } 
 
    return td; 
 
    }) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<table></table>

然後，在瀏覽器的Web檢查，您將獲得：

來源

2015-11-22 21:21:35

@raul爲什麼td返回被放出循環？我的想法是每一次回報都是在頁面上添加一個新的td標籤。我的邏輯對此不正確？ –

@ItaloLemos在你的代碼中，當你返回$（''）'時，'for'循環沒有進入第二次迭代，因爲你正在返回一個值。但是，在我的代碼中，一旦所有迭代完成，我都會返回它。 :) –

是的，現在對我有意義。感謝您分享您的知識。我很感激。 –

這裏有一個稍微不同的方法：

var arrayContent = ['Content1','Content2','Content3','Content4','Content5']; 
 

 
function foo() { 
 
\t var dom = '<tr>'; 
 
\t for (var i = 0; i < arrayContent.length; ++i) 
 
\t \t dom += '<td>' + arrayContent[i] + '</td>'; 
 
\t dom += '</tr>'; 
 
\t $('table').append(dom); 
 
} 
 

 
window.onload = foo; // here you can call the function on other events too, e.g. onclick

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table></table>

來源

2015-11-22 21:59:12 jack

不錯的觀點。謝謝！ –

如何添加多個HTML標籤與jQuery？

回答

相關問題