增量添加ID

时间：2017-01-05 16:51:18

标签： javascript php html mysql ajax

我有一个包含单行和多列的表，并带有一个添加行（添加项）按钮，用于克隆所述表行。表格行有一个选项下拉菜单，其中包含SKU项目，其中onChange将从我们的数据库中提取SKU的产品名称，立方米和价格，并将其显示在空列中。 / p>

问题是当我添加一行并在新行上选择一个sku时，第一行的信息会改变，而不是它所在的行。

示例：

Purchase order form. One Row

Purchase order form. Two Rows

这是Javascript：

    <script type="text/javascript">

    // Adds Cloned Table Row to the Form
    function onClickAdd() {
        var tableRow = document.getElementById("tableRow");
        var tableRowClone = tableRow.cloneNode(true);
        tableRow.parentNode.insertBefore(tableRowClone, tableRow.nextSibling);
            }
    // Retrieves Product Name from db
    function getProdName(str) {
            if (str == "") {
                document.getElementById("tableRow").innerHTML = "";
                return;
            } else { 
                if (window.XMLHttpRequest) {
                    // code for IE7+, Firefox, Chrome, Opera, Safari
                    xmlhttp = new XMLHttpRequest();
                } else {
                    // code for IE6, IE5
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                xmlhttp.onreadystatechange = function() {
                    if (this.readyState == 4 && this.status == 200) {
                        document.getElementById("prodName").innerHTML = this.responseText;
                    }
                };
                xmlhttp.open("GET","getProd.php?q="+str,true);
                xmlhttp.send();
            }
        }
    // Retrieves Cubic Meters from db
    function getCBM(str) {
            if (str == "") {
                document.getElementById("tableRow").innerHTML = "";
                return;
            } else { 
                if (window.XMLHttpRequest) {
                    // code for IE7+, Firefox, Chrome, Opera, Safari
                    xmlhttp = new XMLHttpRequest();
                } else {
                    // code for IE6, IE5
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                xmlhttp.onreadystatechange = function() {
                    if (this.readyState == 4 && this.status == 200) {
                        document.getElementById("cbm").innerHTML = this.responseText;
                    }
                };
                xmlhttp.open("GET","getCBM.php?q="+str,true);
                xmlhttp.send();
            }
        }
    // Retrieves Price from db
    function getPrice(str) {
        if (str == "") {
            document.getElementById("tableRow").innerHTML = "";
            return;
        } else { 
            if (window.XMLHttpRequest) {
                // code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp = new XMLHttpRequest();
            } else {
                // code for IE6, IE5
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    document.getElementById("cost").innerHTML = this.responseText;
                }
            };
                xmlhttp.open("GET","getPrice.php?q="+str,true);
                xmlhttp.send();
            }
        }
    </script>

这是表：

 <table width = 100%>
        <thead>
            <tr>
                <th>Add Item</th>
                <th>SKU</th>
                <th>Item Description</th>
                <th>CBM</th>
                <th>Quantity</th>
                <th>Unit Price</th>
                <th>Net Price</th>
                <!--Not Functional <th>Delete</th>-->
            </tr>
        </thead>
        <tbody>

        <?php 


            echo "<tr id='tableRow'>";
            echo "<td width = 10%><input type = 'submit' value = 'Add Item' onClick='Javascript:onClickAdd()'></td>";
            echo "<td width = 10%>";
            echo "<select name = 'item' onchange = 'getProdName(this.value);getCBM(this.value);getPrice(this.value)'>";

                // Retrieves SKUs from db and populates Select Options
                $connection = mysql_connect('localhost', 'root', '****');
                mysql_select_db('Database'); 
                $sql = mysql_query("SELECT sku FROM inventory");

                while ($row = mysql_fetch_array($sql)) {
                echo '<option value="' . $row['sku'] . '">'.$row['sku'].'</option>';
                    }

            echo "</select>";
            echo "</td>";
            echo "<td width = 30% id = 'prodName'></td>";
            echo "<td width = 10% id = 'cbm'></td>";
            echo "<td width = 10% id = 'qty'><input type = 'text' size = '5'></td>";
            echo "<td width = 10% id = 'cost'></td>";
            echo "<td width = 10% id = 'netCost'></td>";
            // Not Functional echo "<td width = 10%><input type = 'submit' value = 'Delete'></td>";
            echo "</tr>";
            echo "<tr>";
            echo "<td>Total:</td>";
            echo "<td></td>";
            echo "<td width = 30%></td>";
            echo "<td width = 10% id = 'totalCBM'></td>";
            echo "<td width = 10%></td>";
            echo "<td width = 10%></td>";
            echo "<td width = 10% id = 'totalCost'></td>";
            echo "<td width = 10%></td>";
            echo "</tr>";


        ?>

        </tbody>
        </table>

是否可以让每个Select Dropdown对应于它所在的行？

2 个答案:

答案 0 :(得分：0)

在Jquery中重写了函数，最终得到了令人满意的结果

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Purchase Order Form</title>
<style type="text/css">
    form{
        margin: 20px 0;
    }
    form input, button{
        padding: 5px;
    }
    table{
        width: 100%;
        margin-bottom: 20px;
        border-collapse: collapse;
    }
    table, th, td{
        border: 1px solid #cdcdcd;
    }
    table th, table td{
        padding: 10px;
        text-align: left;
    }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">

// Retrieves Product Name from db based on selected sku
    function getProdName(str) {
            if (str == "") {
                document.getElementById("").innerHTML = "";
                return;
            } else { 
                if (window.XMLHttpRequest) {
                    // code for IE7+, Firefox, Chrome, Opera, Safari
                    xmlhttp = new XMLHttpRequest();
                } else {
                    // code for IE6, IE5
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                xmlhttp.onreadystatechange = function() {
                    if (this.readyState == 4 && this.status == 200) {
                        document.getElementById("prodName").innerHTML = this.responseText;
                    }
                };
                xmlhttp.open("GET","getProd.php?q="+str,true);
                xmlhttp.send();
            }
        }
    // Retrieves Cubic Meters from db based on selected sku
    function getCBM(str) {
            if (str == "") {
                document.getElementById("").innerHTML = "";
                return;
            } else { 
                if (window.XMLHttpRequest) {
                    // code for IE7+, Firefox, Chrome, Opera, Safari
                    xmlhttp = new XMLHttpRequest();
                } else {
                    // code for IE6, IE5
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                xmlhttp.onreadystatechange = function() {
                    if (this.readyState == 4 && this.status == 200) {
                        document.getElementById("cbm").innerHTML = this.responseText;
                    }
                };
                xmlhttp.open("GET","getCBM.php?q="+str,true);
                xmlhttp.send();
            }
        }
    // Retrieves Price from db based on selected sku
    function getPrice(str) {
        if (str == "") {
            document.getElementById("").innerHTML = "";
            return;
        } else { 
            if (window.XMLHttpRequest) {
                // code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp = new XMLHttpRequest();
            } else {
                // code for IE6, IE5
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    document.getElementById("cost").innerHTML = this.responseText;
                }
            };
                xmlhttp.open("GET","getPrice.php?q="+str,true);
                xmlhttp.send();
            }
        }

    $(document).ready(function(){
        //add-row
        $(".add-row").click(function(){
            //sku
            var sku = $("#sku").val();          
            //prodName
            var prodName = $("#prodName").text();
            //cbm
            var cbm = $("#cbm").text();
            //qty
            var qty = $("#qty").val();
            //price
            var price = $("#price").text();
            //netPrice
            var netPrice = $("#netPrice").text();
            //markup
            var markup = "<tr><td width=10%><input type='checkbox' name='record' size='1'></td><td width=10%>" + sku + "</td><td width=40%>" + prodName + "</td><td width=10%>" + cbm + "</td><td width=10%>" + qty + "</td><td width=10%>" + price + "</td><td width=10%>" + netPrice + "</td></tr>";
            $("#ledger").append(markup);    
        });

        // Find and remove selected table rows
        //record
        $(".delete-row").click(function(){
            $("table tbody").find('input[name="record"]').each(function(){
                if($(this).is(":checked")){
                    $(this).parents("tr").remove();
                }
            });
        });
    });    
</script>
</head>
<body>
    <form>
        <table width=100%>
        <tr>
            <th width=10%>SKU</th>
            <th width=40%>Product Name</th>
            <th width=10%>CBM</th>
            <th width=10%>Qty</th>
            <th width=10%>Price</th>
            <th width=10%>Net Price</th>
            <th width=10%>Add</th>
        </tr>
        <tr>
        <!--name/sku-->
            <td><?php

            echo "<select name='item' id='sku' onchange='getProdName(this.value);getCBM(this.value);getPrice(this.value)'>";

            $connection = mysql_connect('host', 'user', 'password');
            mysql_select_db('ADI'); 
            $sql = mysql_query("SELECT sku FROM inventory");

            while ($row = mysql_fetch_array($sql)) {
            echo '<option value="' . $row['sku'] . '">'.$row['sku'].'</option>';
                }

            echo "</select>";

            ?></td>     
        <!--email/prodName-->
        <td id="prodName"></td>
        <!--cbm-->
        <td id="cbm"></td>
        <!--qty-->
        <td><input type="text" id="qty" placeholder="Quantity" size="3"></td>
        <!--price-->
        <td id="price"></td>
        <!--netPrice-->
        <td id="netPrice"></td>
        <!--add-row-->
        <td><input type="button" class="add-row" value="Add Row" onclick="Javascript: getProdName(); getCBM(); getPrice();"></td>
        </tr>
        </table>
    </form>
    <table id="ledger">
        <thead>
            <tr>
                <th width=10%>Select</th>
                <th width=10%>SKU</th>
                <th width=40%>ProdName</th>
                <th width=10%>CBM</th>
                <th width=10%>Quantity</th>
                <th width=10%>Unit Price</th>
                <th width=10%>Net Price</th>
            </tr>
        </thead>
        <tbody>
            <tr>

            </tr>
        </tbody>
    </table>
    <!--Delete-Row button-->
    <button type="button" class="delete-row" >Delete Row</button>
</body> 
</html>

答案 1 :(得分：0)

html中不允许重复的ID，而可以允许重复的类，因此您可以为1和{{1}}这些类提供动态。

现在你需要编写你的逻辑来编写正确的类。

希望这有帮助，

相关问题
最新问题