Javascript 将运输和总成本打印到表中_Javascript_Jquery_E Commerce

Javascript 将运输和总成本打印到表中

javascript jquery e-commerce

Javascript 将运输和总成本打印到表中,javascript,jquery,e-commerce,Javascript,Jquery,E Commerce,我在以前创建的网站上建立了一个小店。我有一个问题。整个购物车仅显示一行代码： javascript打印表格，但在源代码中看不到。但是，chrome中的inspect元素是我的好朋友，创建的表将如下所示： <table> <tbody> <tr class="headerRow"> <th class="item-name">Tuote</th> <th cl

我在以前创建的网站上建立了一个小店。我有一个问题。整个购物车仅显示一行代码：

javascript打印表格，但在源代码中看不到。但是，chrome中的inspect元素是我的好朋友，创建的表将如下所示：

<table>
    <tbody>
        <tr class="headerRow">
            <th class="item-name">Tuote</th>
            <th class="item-price">Hinta</th>
            <th class="item-decrement"></th>
            <th class="item-quantity">Määrä</th>
            <th class="item-increment"></th>
            <th class="item-total">Yhteensä</th>
            <th class="item-remove"></th>
        </tr>
        <tr class="itemRow row-0 odd" id="cartItem_SCI-3">
            <td class="item-name">Teipit (Valkoinen hiilikuitu)</td>
            <td class="item-price">€48.00</td>
            <td class="item-decrement">
                <a href="javascript:;" class="simpleCart_decrement">-</a>
            </td>
            <td class="item-quantity">1</td>
            <td class="item-increment">
                <a href="javascript:;" class="simpleCart_increment">+</a>
            </td>
            <td class="item-total">€48.00</td>
            <td class="item-remove">
                <a href="javascript:;" class="simpleCart_remove">Poista</a>
            </td>
        </tr>
    </tbody>
</table>

<table>
    <tbody>
        <tr class="headerRow">
            <th class="item-name">Tuote</th>
            <th class="item-price">Hinta</th>
            <th class="item-decrement"></th>
            <th class="item-quantity">Määrä</th>
            <th class="item-increment"></th>
            <th class="item-total">Yhteensä</th>
            <th class="item-remove"></th>
        </tr>
        <tr class="itemRow row-0 odd" id="cartItem_SCI-3">
            <td class="item-name">Teipit (Valkoinen hiilikuitu)</td>
            <td class="item-price">€48.00</td>
            <td class="item-decrement">
                <a href="javascript:;" class="simpleCart_decrement">-</a>
            </td>
            <td class="item-quantity">1</td>
            <td class="item-increment">
                <a href="javascript:;" class="simpleCart_increment">+</a>
            </td>
            <td class="item-total">€48.00</td>
            <td class="item-remove">
                <a href="javascript:;" class="simpleCart_remove">Poista</a>
            </td>
        </tr>
        <tr class="shippingtotal" id="shipping">
            <td class="item-name">Shipping</td>
            <td class="shipping-cost">€5.00</td>
            <td class="item-decrement">
                <a href="javascript:;" class="simpleCart_decrement">-</a>
            </td>
            <td class="item-quantity">1</td>
            <td class="item-increment">
                <a href="javascript:;" class="simpleCart_increment">+</a>
            </td>
            <td class="item-total">€48.00</td>
            <td class="item-remove">
                <a href="javascript:;" class="simpleCart_remove">Poista</a>
            </td>
        </tr>
    </tbody>
</table>


托特
欣塔
Märä
YHä
Teipit（Valkoinen hiilikuitu）
€48.00
1.
€48.00

我希望它能打印出这样的内容：

<table>
    <tbody>
        <tr class="headerRow">
            <th class="item-name">Tuote</th>
            <th class="item-price">Hinta</th>
            <th class="item-decrement"></th>
            <th class="item-quantity">Määrä</th>
            <th class="item-increment"></th>
            <th class="item-total">Yhteensä</th>
            <th class="item-remove"></th>
        </tr>
        <tr class="itemRow row-0 odd" id="cartItem_SCI-3">
            <td class="item-name">Teipit (Valkoinen hiilikuitu)</td>
            <td class="item-price">€48.00</td>
            <td class="item-decrement">
                <a href="javascript:;" class="simpleCart_decrement">-</a>
            </td>
            <td class="item-quantity">1</td>
            <td class="item-increment">
                <a href="javascript:;" class="simpleCart_increment">+</a>
            </td>
            <td class="item-total">€48.00</td>
            <td class="item-remove">
                <a href="javascript:;" class="simpleCart_remove">Poista</a>
            </td>
        </tr>
    </tbody>
</table>

<table>
    <tbody>
        <tr class="headerRow">
            <th class="item-name">Tuote</th>
            <th class="item-price">Hinta</th>
            <th class="item-decrement"></th>
            <th class="item-quantity">Määrä</th>
            <th class="item-increment"></th>
            <th class="item-total">Yhteensä</th>
            <th class="item-remove"></th>
        </tr>
        <tr class="itemRow row-0 odd" id="cartItem_SCI-3">
            <td class="item-name">Teipit (Valkoinen hiilikuitu)</td>
            <td class="item-price">€48.00</td>
            <td class="item-decrement">
                <a href="javascript:;" class="simpleCart_decrement">-</a>
            </td>
            <td class="item-quantity">1</td>
            <td class="item-increment">
                <a href="javascript:;" class="simpleCart_increment">+</a>
            </td>
            <td class="item-total">€48.00</td>
            <td class="item-remove">
                <a href="javascript:;" class="simpleCart_remove">Poista</a>
            </td>
        </tr>
        <tr class="shippingtotal" id="shipping">
            <td class="item-name">Shipping</td>
            <td class="shipping-cost">€5.00</td>
            <td class="item-decrement">
                <a href="javascript:;" class="simpleCart_decrement">-</a>
            </td>
            <td class="item-quantity">1</td>
            <td class="item-increment">
                <a href="javascript:;" class="simpleCart_increment">+</a>
            </td>
            <td class="item-total">€48.00</td>
            <td class="item-remove">
                <a href="javascript:;" class="simpleCart_remove">Poista</a>
            </td>
        </tr>
    </tbody>
</table>


托特
欣塔
Märä
YHä
Teipit（Valkoinen hiilikuitu）
€48.00
1.
€48.00
航运
€5.00
1.
€48.00

下面是simplecart.js本身：

我认为我应该在这部分代码中添加一些内容：

// write out cart
                writeCart: function (selector) {
                    var TABLE = settings.cartStyle.toLowerCase(),
                        isTable = TABLE === 'table',
                        TR = isTable ? "tr" : "div",
                        TH = isTable ? 'th' : 'div',
                        TD = isTable ? 'td' : 'div',
                        cart_container = simpleCart.$create(TABLE),
                        header_container = simpleCart.$create(TR).addClass('headerRow'),
                        container = simpleCart.$(selector),
                        column,
                        klass,
                        label,
                        x,
                        xlen;

                    container.html(' ').append(cart_container);

                    cart_container.append(header_container);


                    // create header
                    for (x = 0, xlen = settings.cartColumns.length; x < xlen; x += 1) {
                        column = cartColumn(settings.cartColumns[x]);
                        klass = "item-" + (column.attr || column.view || column.label || column.text || "cell") + " " + column.className;
                        label = column.label || "";

                        // append the header cell
                        header_container.append(
                        simpleCart.$create(TH).addClass(klass).html(label));
                    }

                    // cycle through the items
                    simpleCart.each(function (item, y) {
                        simpleCart.createCartRow(item, y, TR, TD, cart_container);
                    });

                    return cart_container;
                },

                // generate a cart row from an item
                createCartRow: function (item, y, TR, TD, container) {
                    var row = simpleCart.$create(TR).addClass('itemRow row-' + y + " " + (y % 2 ? "even" : "odd")).attr('id', "cartItem_" + item.id()),
                        j,
                        jlen,
                        column,
                        klass,
                        content,
                        cell;

                    container.append(row);

                    // cycle through the columns to create each cell for the item
                    for (j = 0, jlen = settings.cartColumns.length; j < jlen; j += 1) {
                        column = cartColumn(settings.cartColumns[j]);
                        klass = "item-" + (column.attr || (isString(column.view) ? column.view : column.label || column.text || "cell")) + " " + column.className;
                        content = cartCellView(item, column);
                        cell = simpleCart.$create(TD).addClass(klass).html(content);

                        row.append(cell);
                    }
                    return row;
                }

            });

//写出购物车
writeCart:函数（选择器）{
var TABLE=settings.cartStyle.toLowerCase（），
isTable=表格==='表格'，
TR=isTable？“TR”：“div”，
TH=isTable？'TH'：'div'，
TD=isTable？'TD'：'div'，
cart_container=simpleCart.$create（表），
header_container=simpleCart.$create（TR）.addClass（'headerRow'），
容器=simpleCart.$（选择器），
专栏，
克拉斯，
标签，
x,，
克斯林；
container.html（“”）.append（cart\u container）；
cart\u container.append（header\u container）；
//创建标题
对于（x=0，xlen=settings.cartColumns.length；x


但是什么呢？装运可通过以下方式显示：
我试着在购物车后面加上这个，但看起来有点傻
更新：这是一个未经授权的示例（之前）：
这就是它应该是什么样子
首先添加以下内容：
    // [..]
    header_container = simpleCart.$create(TR).addClass('headerRow'),

    // Added line
    total_container = simpleCart.$create(TR).addClass('shippingtotal').attr('id', "shipping" ),

    container = simpleCart.$(selector),
    // [..]

及
及
我会处理impl。现在：-）


将以下内容添加到您的设置中。。（来自）


更新[…]

[…已从更新中删除代码]

尝试编写可重用代码（您希望items和total具有类似的输出）。

尝试让这些方法执行它们描述的操作（附加到容器外部，无论如何都返回了行）。

尽量使用正确的变量名。

尝试将不同类型的功能分开。

即使在writeCart方法中，也可以拆分“createHeader（..）createItems（..）createTotal（..）”


此外，尝试使用语义名称。至少应将“y”变量重命名为“rowIndex”或其他名称
更新：
createTotalShippingRow: function( TR, TD ) {

    // I think we shouldn't instantiate the item here, but you could test if this works?
    var item = {
        name: "Shipping",
        price: 5,               
//      view: "empty",      // decrement
//      attr: "empty",      // quantity
//      view: "empty",      // increment
        total: this.total(),
//      view: "empty",      // remove
        };

    var rowid = "shipping";

    return createCartTotalShippingRow( item, rowid, TR, TD );
},

createCartTotalShippingRow: function( item, rowclass, rowid, TR, TD ) {
    var row = simpleCart.$create(TR).addClass( rowclass ).attr( 'id', rowid ),
        i = 0,
        cartTotalColumns = settings.cartTotalColumns,
        ln = cartTotalColumns.length,
        column,
        classname;

    for ( ; i < ln; i++ ) {
        column = cartColumn( cartTotalColumns[ i ] );
        classname = "item-" + ( column.attr || ( isString( column.view ) ? column.view : column.label || column.text || "cell" ) ) + " " + column.className;
        content = cartCellView( item, column );
        cell = simpleCart.$create(TD).addClass(classname).html(content);
        row.append(cell);
    }

    return row;
}

createTotalShippingRow:函数（TR，TD）{
//我认为我们不应该在这里实例化该项，但是您可以测试它是否有效？
变量项={
名称：“装运”，
价格:5,，
//视图：“空”//减量
//属性：“空”//数量
//视图：“空”，//增量
total:这个。total（），
//视图：“空”，//删除
};
var rowid=“装运”；
返回createCartTotalShippingRow（项目、rowid、TR、，
createTotalShippingRow: function( TR, TD ) {

    // I think we shouldn't instantiate the item here, but you could test if this works?
    var item = {
        name: "Shipping",
        price: 5,               
//      view: "empty",      // decrement
//      attr: "empty",      // quantity
//      view: "empty",      // increment
        total: this.total(),
//      view: "empty",      // remove
        };

    var rowid = "shipping";

    return createCartTotalShippingRow( item, rowid, TR, TD );
},

createCartTotalShippingRow: function( item, rowclass, rowid, TR, TD ) {
    var row = simpleCart.$create(TR).addClass( rowclass ).attr( 'id', rowid ),
        i = 0,
        cartTotalColumns = settings.cartTotalColumns,
        ln = cartTotalColumns.length,
        column,
        classname;

    for ( ; i < ln; i++ ) {
        column = cartColumn( cartTotalColumns[ i ] );
        classname = "item-" + ( column.attr || ( isString( column.view ) ? column.view : column.label || column.text || "cell" ) ) + " " + column.className;
        content = cartCellView( item, column );
        cell = simpleCart.$create(TD).addClass(classname).html(content);
        row.append(cell);
    }

    return row;
}