Onchange使用ajax在表行中追加数据


Onchange append data in table row using ajax

我想更改select标记中所选选项值的表。但我也想将结果附加到现有的表行中,为此我可以将数据检索到表中,但不能在tbody的内部html中附加新行。我只想知道如何将行附加到ajax响应文本中,我已经尝试过了。

<script>
    function resInvoice(InvoiceVal){
        var xhttp;    
        if (InvoiceVal == "") {
            document.getElementById("InvoiceBody").innerHTML = "";
            return;
        }
        xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
            if (xhttp.readyState == 4 && xhttp.status == 200) {
                document.getElementById("InvoiceBody").innerHTML="<tr>"+xhttp.responseText+"</tr>");
            }
        };
        xhttp.open("GET", "GetSelect.php?InData="+InvoiceVal, true);
        xhttp.send();
    }
</script>
<tbody id="InvoiceBody">
    <tr id="select">
        <td colspan="2">
            <select class='form-control select2' onchange="resInvoice(this.value)">          
                <?php 
                    $fqeyr="SELECT ItemID,LineItemName FROM `per_addnew_lineitem`";
                    $faddnew=mysqli_query($con,$fqeyr);
                    while($fnrow=mysqli_fetch_array($faddnew)){
                        $lname=$fnrow['LineItemName'];
                ?>
                <option value="<?php echo $fnrow['ItemID'] ;?>">
                    <?php echo $lname ; ?>
                </option>
                <?php } ?>         
            </select>
        </td>
        <td>
            <button type="button" class="btn btn-primary btn-xs" style="margin-top:12px;" data-toggle="modal" data-target="#AddNewLine">+ Add New Line Item </button>
        </td>
    </tr>
</tbody>

和IN GetSelect.php

if(isset($_GET['InData'])){
    $InData=$_GET['InData'];
    $InDataRes=mysqli_query($con,"SELECT * FROM `per_addnew_lineitem` where ItemID='$InData'");
    while($InvoiceD=mysqli_fetch_array($InDataRes)){
        echo '<td>'.$InvoiceD['LineItemName'].'</td>' ;
        echo '<td>'.$InvoiceD['Description'].'</td>' ;
        echo '<td>'.$InvoiceD['Calculation'].'</td>' ;
    }
}

试试这个

var new_row = "<tr>" + xhttp.responseText + "</tr>";
$("#InvoiceBody").append(new_row);

代替

 document.getElementById("InvoiceBody").innerHTML="<tr>"+xhttp.responseText+"</tr>");