我正在使用 Ajax 和 JavaScript 創建一個表，并使用 Spring Boot 作為后端技術。所以場景是：有兩個下拉串列，一個用于從串列中選擇公司名稱，并顯示該公司對應的卡車串列。從下拉串列中選擇公司名稱和卡車后，單擊搜索按鈕將顯示一個表格，其中包含所選公司和卡車的動態資料。因此，對于每個創建的行，表行中都有選擇下拉串列。所以我想在從下拉串列中選擇任何選項串列時顯示更多資料。
在使用 Ajax 和 JavaScript 從下拉串列中選擇任何選項后，我想在父行中顯示子行。
下面是我使用動態資料創建表的腳本：
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");
}
});
}
下面的腳本是處理選擇選項上的 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");
}
});
}
uj5u.com熱心網友回復：
更改 getmorerows() document.getElementById('searchresulttable').innerHTML = childrow 中的一行；到 $('#searchresulttable').append(childrow);
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/389416.html
標籤：javascript 阿贾克斯
上一篇：埠8083上的Django后端無法決議從埠8081上的gulp網頁提供的JQueryAJAXCORSPOST請求