javascript - 使用 jquery append() 制作 标签的网格布局

Question

我有一个对象，其中包含一些地址信息，我想 append()到 HTML 表格。

表格开始如下:

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

</table>

然后我将我的地址信息放入另一个表中(此处为第 5 行)，并将该表放入 <td> 中。 。我正在尝试使其最大数量为 <td> s(此处为 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> s 并没有像我想象的那样附加。它产生了一个新的<tr>每一次。当我打印变量append_to_table to the console时，看起来是对的。 <tr><td></td></tr>当应该有的时候，就<td></td>当情况应该如此时。 jquery或chrome是否自动附加新的<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);
  });
});