使<td>带有jquery append(）的标记

make grid layout of <td> tags with jquery append()

本文关键字：append 带有 lt td gt jquery      更新时间：2023-09-26

我有一个对象，其中包含一些地址信息，我想将其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或chrome是否每次都会自动附加一个新的<tbody>？

jsbin

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

除了第一部分（!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);
  });
});
当您试图将<td>附加到<table>元素时，jQuery会自动添加<tr>标记，因此必须将其附加到最后一个<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;
相关文章：