I have a table that I am creating on button click. When I get my table rows, there is a dropdown on which onchange event is called. So I want to display another row inside parent table when select any of the options from list.
Below is my script where I am creating 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) {
console.log(data.response);
var list = data.response;
var row = "";
if(list.length > 0){
for(var i = 0; i < list.length; i++){
row = row + "<tr>" +
"<td>"+list[i].company.companyname+"</td>" +
"<td>"+list[i].driver.username+"</td>" +
"<td>"+list[i].truck.name+"</td>" +
"<td>"+list[i].tripnumber+"</td>" +
"<td><select>" +
"<option selected disabled>Choose subtrip</option><option value='1'>1</option>" +
"<option value='2'>2</option><option value='3'>3</option></select></td>"+
"<td>"+list[i].pickupdate+"</td>" +
"<td>"+list[i].deliverydate+"</td>"+
"<td>"+list[i].loadrate+"</td>" +
"<td>"+list[i].dispatchfee+"</td>" +
"<td>"+list[i].fuel+"</td>" +
"<td>"+list[i].cardfee+"</td>" +
"<td>"+list[i].onroadrepair+"</td>" +
"<td>"+list[i].shoprepair+"</td>" +
"<td>" +
"<a data-toggle='modal' data-target='#mode_payment' onclick="getpayment('"+list[i].tripid+"');">"
+"<i class='fa fa-paypal' aria-hidden='true' style='color:#3585a5'></i>" +
"</a>" +
"<a onclick="getTrip('"+list[i].tripid+"');">"
+"<i class='fa fa-pencil-square-o ml-3' style='color: #3384a4;'></i>" +
"</a>" +
"<a href='invoice?id="+list[i].tripid+"'>"
+"<i class='fa fa-file-pdf-o ml-3' aria-hidden='true' style='color:red'></i>" +
"</a>" +
"</td>" +
"</tr>";
}
}
document.getElementById('searchresulttable').innerHTML = row;
} else {
var error = data.responseMessage;
swal(error, "", "error");
}
} else {
var error = data.responseMessage;
swal(error, "", "error");
}
});
}