javascript - onchange使用ajax在表行中追加数据

Question

我想根据 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>

并在 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>' ;
    }
}

Answer 1

试试这个

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

代替

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