0

我有一个包含一些地址信息的对象，我想将其添加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

4

2 回答 2

1

当您检查新行时，您正在搜索一个类shipping_address_container_table，但是当您创建新行时。您只是添加一个带有 class 的 tr add_container。

!is_tr您当前的代码除了第一部分（总是 == true）之外什么也没做。那可能是你的问题。

另外，我将现有tr元素的追加移到了，tr而不是 ，table以确保 jquery 不会自动将 包装td在新的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.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);
  });
});
于 2013-02-05T19:09:59.040 回答
1

<tr>当您尝试附加<td>到元素时， jQuery 会自动添加标签<table>，因此您必须将其附加到 last <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;
于 2013-02-05T19:12:40.697 回答