javascript - 为什么我的表行重复？

Question

我正在使用 jQuery 生成一个表并从数据结构加载其行。

我无法弄清楚为什么表加载了正确的行和顺序，但它重复了行集，所以我最终得到了双倍的数据。

我创建了一个 JSFiddle here显示结果。

我有这个 HTML:

<table class="trans-calc gateway-selector">
    <tbody>
        <tr>
            <td>
                <h4>MERCHANT FACILITIES:</h4>
            </td>
        </tr>
        <tr>
            <td>
                <table id="merchants">
                    <thead>
                    <tr>
                        <th style="width: 50%;">MERCHANT</th>
                        <th style="width: 25%;">TRAN. FEE</th>
                        <th style="width: 25%;">CARD COST</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>

我的 JS 看起来像这样:

var eway_link = "<a href='https://www.eway.com.au' target='_new'>eWay</a>";
var stripe_link = "<a href='https://stripe.com/au' target='_new'>stripe</a>";
var checkout_link = "<a href='https://www.2checkout.com' target='_new'>2checkout</a>";
var pin_payments_link = "<a href='https://pin.net.au/' target='_new'>Pin Payments</a>";
var securepay_link = "<a href='https://www.securepay.com.au/' target='_new'>SecurePay</a>";
var paypal_link = "<a href='https://www.paypal.com/au/' target='_new'>PayPal</a>";

var merchants = [{
    "eway": [{
        "transaction_fee": 0.30,
            "domestic_card_cost": 0.026,
            "plan": "Have a Go Plan",
            "link": eway_link,
            "img": '<img src="/wp-content/uploads/eway.png"/>'
    }]
}, {
    "stripe": [{
        "transaction_fee": 0.30,
            "domestic_card_cost": 0.0175,
            "plan": "Standard Plan",
            "link": stripe_link,
            "img": '<img src="/wp-content/uploads/stripe.png"/>'
    }]
}, {
    "2checkout": [{
        "transaction_fee": 0.45,
            "domestic_card_cost": 0.0390,
            "plan": "Standard Plan",
            "link": checkout_link,
            "img": '<img src="/wp-content/uploads/2co.png"/>'
    }]
}, {
    "pin_payments": [{
        "transaction_fee": 0.30,
            "domestic_card_cost": 0.0175,
            "plan": "Standard Plan",
            "link": pin_payments_link,
            "img": '<img src="/wp-content/uploads/pin-payments.png"/>'
    }]
}, {
    "secure_pay": [{
        "transaction_fee": 0.30,
            "domestic_card_cost": 0.0240,
            "link": securepay_link,
            "img": '<img src="/wp-content/uploads/securepay.png"/>'
    }]
}, {
    "paypal": [{
        "transaction_fee": 0.30,
            "domestic_card_cost": 0.0240,
            "link": paypal_link,
            "img": '<img src="/wp-content/uploads/paypal.png"/>'
    }]
}];


jQuery(document).ready(function () {
    /** Set up Merchants Table **/
    createMerchantTable();
});

function createMerchantTable() {

    console.log("HERE");

    var table_row = "";
    jQuery("#merchants body").empty();

    jQuery.each(merchants, function (item, value) {

        for (key in value) {

            table_row = "<tr>" +
                "<td id='" + merchants[item] + "'>" + value[key][0]['img'] + "</td>" +
                "<td>" + parseFloat(value[key][0]['transaction_fee']).toFixed(2) + "c</td>" +
                "<td>" + parseFloat(value[key][0]['domestic_card_cost'] * 100).toFixed(2) + "%</td>" +
                "</tr>";

            jQuery("#merchants tbody").append(table_row);

            table_row = "";

        }

    });


}

Answer 1

您有 2 个打开 tbody，而不是 1 个打开和 1 个关闭

替换

<tbody>
<tbody>

由

<tbody>
</tbody>