使網格佈局的​​標籤與jQuery的附加（）

Question

我有一個對象，其中有一些地址信息，我想append()到一個HTML表格。

表開始是這樣的：

<table class="shipping_information" border="1"> 

</table> 

然後我把我的地址信息到另一個表（這裏5號線），並把該表爲<td>。我試圖讓最大數量爲<td>（這裏是2）。如果超過2，將追加新的<tr>。

function add_shipping_address_to_shipping_container(address_obj, shipping_container) { 
    var append_to_table = ""; 
    var table = shipping_container.find('table.shipping_information'); 
    var max_td = 2; 
    var formatted_address = format_address(address_obj); //returns a table with the address 

    //are there any rows in the table 
    var is_tr = table.find('tr.shipping_address_container_table').length; 
    if (!is_tr) { 
     //no tr so append tr and td 
     //colspan should be max_td 
     append_to_table = "<tr class='add_container'><td class='add_container'>" + formatted_address +"</td></tr>" 
    } else { 
     //there is a tr 
     var last_tr = table.find('tr.add_container:last'); 
     //number of tds in the last row 
     var num_td = last_tr.find('td.add_container').length; 
     if (num_td >= max_td) { 
      append_to_table = "<tr class='add_container'><td class='add_container'>" + formatted_address + "</td></tr>"; 
     } else { 
      append_to_table = "<td class='add_container'>" + formatted_address + "</td>"; 
     } 

    } 
    table.append(append_to_table); 
} 

但是，<td>不是我想象的那樣追加。它每次都會產生一個新的<tr>。當我打印變量append_to_table to the console時，它看起來是正確的。 <tr><td></td></tr>什麼時候應該有，而只有<td></td>的時候應該是這樣。是jQuery或鉻自動添加一個新的<tbody>每次或什麼？

jsbin

Answer 1

當您檢查新行，您正在尋找一類shipping_address_container_table但是當你正在創建的新行。您只能添加類add_container的tr。

您目前的代碼除了第一部分（!is_tr總是== true）之外沒有任何功能。這可能是你的問題。

而且，我感動追加現有tr元素到tr代替table確保jQuery的不會在新tr自動換行td。

這爲我工作：

function add_shipping_address_to_shipping_container(address_obj, shipping_container) { 
    var append_to_table = ""; 
    var table = shipping_container.find('table.shipping_information'); 
    var max_td = 2; 
    var formatted_address = format_address(address_obj); //returns a table with the address 
    //are there any rows in the table 
    var is_tr = table.find('tr.add_container').length; 
    if (!is_tr) { 
     //no tr so append tr and td 
     //colspan should be max_td 
     append_to_table = "<tr class='add_container'><td class='add_container'>" + formatted_address + "</td></tr>"; 
    table.append(append_to_table); 
    } else { 
     //there is a tr 
     var last_tr = table.find('tr.add_container:last'); 
     //number of tds in the last row 
     var num_td = last_tr.find('td.add_container').length; 
     if (num_td >= max_td) { 
      append_to_table = "<tr class='add_container'><td class='add_container'>" + formatted_address + "</td></tr>"; 
    table.append(append_to_table); 
     } else { 
      append_to_table = "<td class='add_container'>" + formatted_address + "</td>"; 
    last_tr.append(append_to_table); 
     } 

    } 
} 

function format_address(address_obj){ 

    var address_table = "<table border='1'>"; 

    address_table += ("<tr><td class='shipping_address_table'>" + address_obj.attn + "</td></tr>"); 
    address_table += ("<tr><td class='shipping_address_table'>" + address_obj.company_name + "</td></tr>"); 
    address_table += ("<tr><td class='shipping_address_table'>" + address_obj.address_1 + "</td></tr>"); 

    address_table += "</table>"; 

    return address_table; 
} 

$(document).ready(function(){ 
    $('body').on('click', '#button', function(){ 
    var address_obj = { 
    attn : "sample attention", 
    company_name : "sample company", 
    address_1 : "sample line 1" 
    }, 
    shipping_container = $('#wrapper'); 

    add_shipping_address_to_shipping_container(address_obj, shipping_container); 
    }); 
}); 

Answer 2

jQuery的自動添加<tr>標籤，當你試圖追加<td>到<table>元素，所以你必須將其追加到最後<tr>。

http://jsbin.com/exutaq/1/edit

而且，你對現有的行檢查是錯誤的：

var is_tr = table.find('tr.shipping_address_container_table').length; 

應該是：

var is_tr = table.find('tr.add_container').length;