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ではなくに移動して、 tablejquery が自動的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>要素に追加しようとすると、jQuery はタグを自動的に追加<td>する<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 に答える