使用 JavaScript 和 Ajax 选择下拉列表后，如何在父 table 内追加 table 行？

Question

我正在创建一个 table 使用 Ajax 和 JavaScript 并使用 Spring Boot 作为后端技术。所以场景是：有两个下拉列表，一个是 selecting 列表中的公司名称，对于该公司，将显示相应的卡车列表。从两个下拉列表中 select 输入公司名称和卡车后，单击搜索按钮将显示 table，其中包含 select 编辑的公司和卡车的动态数据。因此，对于每个创建的行，在 table 行中都有 select 下拉列表。所以我想在 select 从下拉列表中选择任何选项列表时显示更多数据。

我想在 select 使用 Ajax 和 JavaScript 从下拉列表中选择任何选项后，在父行中显示子行。

下面是我使用动态数据创建 table 的脚本：

    function searchdata(){
        var companyid = $("#searchQueryDD").val();
        var truckid = $("#searchtruckdd").val();
        var url = "api/gettablebycompanyandtruck";
        $.post(url, {
            companyid : companyid,
            truckid : truckid,
            limit : limit,
        }, function(data, status) {
                if (data.status == "OK") {
                    if (data.statusCode == 1) {
                        var list = data.response;
                        var row = "", tripnumber="";
                        var newtrip = []; 
                        var uniquetrip = {}; 
                        var row = "";
                        if(list.length > 0){
                        for(var i = 0; i < list.length; i++){
                            tripnumber = list[i].tripnumber;
                            uniquetrip[tripnumber] = list[i];
                        }
                        for(var i in uniquetrip){
                            newtrip.push(uniquetrip[i]);
                        }
                        
                        for(var i = 0; i < newtrip.length; i++){
                            row = row + "<tr>" +
                            "<td>"+newtrip[i].company.companyname+"</td>" +
                            "<td>"+newtrip[i].driver.username+"</td>" +
                            "<td>"+newtrip[i].truck.name+"</td>" +
                            "<td>"+newtrip[i].tripnumber+"</td>" +
                            "<input type='hidden' id='company_id' value='"+newtrip[i].company.companyid+"'>" +
                            "<input type='hidden' id='trip_number' value='"+newtrip[i].tripnumber+"'>"+
                            "<td><select onchange='getmorerows();' id='sub_trip'>" +
                            "<option selected disabled>Choose subtrip</option><option value='1'>1</option>" +
                            "<option value='2'>2</option><option value='3'>3</option></select></td>"+
                            "<td>"+newtrip[i].pickupdate+"</td>" +
                            "<td>"+newtrip[i].deliverydate+"</td>"+
                            "<td>"+newtrip[i].loadrate+"</td>" +
                            "<td>"+newtrip[i].dispatchfee+"</td>" +
                            "<td>"+newtrip[i].fuel+"</td>" +
                            "<td>"+newtrip[i].cardfee+"</td>" +
                            "<td>"+newtrip[i].onroadrepair+"</td>" +
                            "<td>"+newtrip[i].shoprepair+"</td>" +
                            "<td>"+newtrip[i].trailerrent+"</td>" +
                            "<td>"+newtrip[i].comcheck+"</td>" +
                            "<td>"+newtrip[i].advance+"</td>" +
                            "<td>"+newtrip[i].miscellenous+"</td>" +
                            "<td>"+newtrip[i].total+"</td>" +
                            "<td>"+newtrip[i].layover+"</td>" +
                            "<td>"+newtrip[i].grandtotal+"</td>" +
                            "<td>" +
                                "<a data-toggle='modal' data-target='#mode_payment' onclick=\"getpayment('"+newtrip[i].tripid+"');\">"
                                    +"<i class='fa fa-paypal' aria-hidden='true' style='color:#3585a5'></i>" +
                                "</a>" +
                                "<a onclick=\"getTrip('"+newtrip[i].tripid+"');\">"
                                    +"<i class='fa fa-pencil-square-o ml-3' style='color: #3384a4;'></i>" +
                                "</a>" +
                                "<a href='invoice?id="+newtrip[i].tripid+"'>"
                                    +"<i class='fa fa-file-pdf-o ml-3' aria-hidden='true' style='color:red'></i>" +
                                "</a>" +
                            "</td>" +
                        "</tr>";
                        }
                    }else{
                        row = row + "<tr><td colspan='19' style='font-size: initial;font-family: initial;'>No Data Available.</td></tr>";
                    }
                    document.getElementById('searchresulttable').innerHTML = row;
                    $("#triptable").css('display','inline-block');
                    } else {
                        var error = data.responseMessage;
                        swal(error, "", "error");
                    }
                } else {
                    var error = data.responseMessage;
                    swal(error, "", "error");
                }
            });
    }

下面的脚本是处理 select 选项上的 onchange 事件：

function getmorerows() {
    var companyid = document.getElementById("company_id").value;
    var tripnumber = document.getElementById("trip_number").value;
    var subtrip = document.getElementById("sub_trip").value;
    var url = "api/getbysubtrip";
    $.post(url,{
        companyid : companyid,
        tripnumber : tripnumber,
        subtrip : subtrip,
    },function(data, status){
        if (data.status == "OK") {
            if (data.statusCode == 1) {
                var list = data.response;
                var childrow = "";
                if(list.length > 0){
                    for(var i = 0; i < list.length; i++){
                        childrow = childrow + "<tr class='display-nonee'>" +
                                    "<td>"+list[i].company.companyname+"</td>"+
                                    "<td>"+list[i].company.companyname+"</td>"+
                                    "<td>"+list[i].company.companyname+"</td>"+
                                "</tr>";
                        var tr = $(this).parent().parent().nextAll(':lt(2)');
                        if (tr.is(".display-none")) {
                            tr.removeClass('display-none');
                          } else {
                            tr.addClass('display-none');
                          }
                    }
                }
                document.getElementById('searchresulttable').innerHTML = childrow;
            } else {
                var error = data.responseMessage;
                swal(error, "", "error");
            }
        } else {
            var error = data.responseMessage;
            swal(error, "", "error");
        }
    });
}

Answer 1

在getmorerows()中改一行 document.getElementById('searchresulttable').innerHTML = childrow;到 $('#searchresulttable').append(childrow);

使用 JavaScript 和 Ajax 选择下拉列表后，如何在父 table 内追加 table 行？

How to append table row inside parent table after selecting dropdown list using JavaScript and Ajax?

javascript

ajax