Question

我有一些代码在订单确认屏幕上打印出客户订单。它使用Javascript执行此操作以使用信息填充table。理想情况下，我想在JQuery

中执行此操作

这是我的HTML

 <!-- Order Confirmation Form -->
    <form action="<?the_permalink()?>" method="post">
    <div id="summary">
    <table id="ordertable">
        <tr><th>Product</th>
        <th>Quantity</th>
        <th>Bulk</th>
        <th>Options</th>
        </tr>
    </table>
    <!-- Comments Box -->
    Comments<br/>
    <textarea name="comments"></textarea><br/>
    <input name="product_list" id="products_field" type="hidden" value="<?= isset($_POST['product_list'])?$_POST['product_list']:'' ?>">
    Next Day Delivery <input type="checkbox" name="next-day-delivery" value="yes" />
    <input type="submit" value="Confirm Order" class="confirmBtn"/>
    </div>
    </form>

这是我的JS

//Reference to the order table
var ordertable = document.getElementById("ordertable");

    //Loop through the Array and display in the table
    for(var i = 0; i < productArray.length; i ++){

        //This is the data to display
        console.log("Order Item " + i);
        console.log("StockCode: " + productArray[i].stockCode);
        console.log("Quantity: " + productArray[i].quantity);
        console.log("Bulk: " + productArray[i].bulk);

        var row = ordertable.insertRow(i + 1);
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var cell3 = row.insertCell(2);
        var cell4 = row.insertCell(3);
        cell1.innerHTML = productArray[i].stockCode;
        cell2.innerHTML = productArray[i].quantity;
        cell3.innerHTML = productArray[i].bulk;
        cell4.innerHTML = "<input type='button' value='-' class='removeBtn'/><input type='button' value='+' class='addBtn'/><input type='button' value='Delete' class='deleteBtn'/>"
    }

这是我的网页图片，我似乎无法弄清楚如何在select下面的单元格中添加bulk框（红色部分）。如果bulk == true显示select框else，则无法显示任何内容。（有些产品可以批量订购。）

Screenshot of confirmation page

有没有人对我如何实现这一目标有任何建议？

Answer 1

可能只是像

这样的东西

if(productArray[i].bulk)
 cell3.innerHTML =  "<select><option>1</option>..</select>";

Answer 2

试试这个

 cell3.innerHTML = (productArray[i].bulk)?'<select><option value="...">...</option></select>':'';

Answer 3

试试这个，

var select = '<select><option value="1">1</option><option value="2">2</option></select>';
cell3.innerHTML = productArray[i].bulk?select: '';

或只是

cell3.innerHTML = productArray[i].bulk? '<select><option value="1">1</option><option value="2">2</option></select>' : '

Answer 4

for(var i = 0; i < productArray.length; i ++){

        //This is the data to display
        console.log("Order Item " + i);
        console.log("StockCode: " + productArray[i].stockCode);
        console.log("Quantity: " + productArray[i].quantity);
        console.log("Bulk: " + productArray[i].bulk);

        var row = ordertable.insertRow(i + 1);
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var cell3 = row.insertCell(2);
        var cell4 = row.insertCell(3);
        cell1.innerHTML = productArray[i].stockCode;
        cell2.innerHTML = productArray[i].quantity;
        if(productArray[i].bulk) // true means select
        cell3.innerHTML = "<select><option>1</option>..</select>"
        else
        cell3.innerHTML = '';
        ell4.innerHTML = "<input type='button' value='-' class='removeBtn'/><input type='button' value='+' class='addBtn'/><input type='button' value='Delete' class='deleteBtn'/>"
    }

使用JQuery动态添加选择框

4 个答案: