Loop through last td to append data in each tr jquery
Question
Can anyone help me out with this? I have a ajax call return of the following. I want the below ajax call return to be in the table and I want it append to table tr and for each tr last td loop through puse.
My current code:
"pid": "1",
"pcode": "drug-001",
"pname": "Abacavir (ABC) ",
"pdosage": "3/4/4",
"puse": [
{
"adDate": "2018-06-11",
"adTime": "19:01:06"
},
{
"adDate": "2018-06-11",
"adTime": "19:01:06"
}
]
},
{
"pid": "2",
"pcode": "drug-002",
"pname": "Abacavir (ABC) ",
"pdosage": "3/4/4",
"puse": [
{
"adDate": "2018-06-11",
"adTime": "19:01:06"
},
{
"adDate": "2018-06-11",
"adTime": "19:14:26"
}
]
},
{
"pid": "3",
"pcode": "drug-003",
"pname": "a-B-Artemether Injection",
"pdosage": "3/4/4",
"puse": [
{
"adDate": "2018-06-11",
"adTime": "19:01:06"
}
]
},
{
"pid": "4",
"pcode": "drug-004",
"pname": "Acetazolamide",
"pdosage": "3/4/4",
"puse": []
},
{
"pid": "5",
"pcode": "drug-005",
"pname": "Acetazolamide",
"pdosage": "3/4/4",
"puse": []
}
]
$.ajax({
type: "POST",
url: 'call.php',
dataType: "json",
data: {},
success: function(data) {
$.each(data, function(key, val) {
$('#PatientTreatment').append('<tr><td>' + val.pname +
'</td><td>' + val.pcode + '</td><td>' + val.pdosage + '</td><td>' + val.pdisc +
'</td><td class="test"></td><td id="td' + val.pid + '"></td></tr>')
$.each(val.puse, function(key, valb) {
append('<div>' + valb.adDate + adTime + '</div>')
});
});
}
})
<html>
<table>
<tr>
<td>drug-001</td>
<td>Abacavir (ABC) </td>
<td>pdosage</td>
<td class="test">
<div>2018-06-11 19:01:06</div>
<div>2018-06-11 19:01:06</div>
</td>
</tr>
</table>
</html>
2 answers
solution1
0 2018-06-13 20:55:23
This should be fairly simple to accomplish assuming I have your requirements right, how does this look?
The code snippet is actually very difficult to view on StackOverflow try viewing the codepen.io link instead.
I used td:nth-child(4) as the selector to get as you imagine the the 4th td in the current row (since we're still inside the enclosing foreach we are still "inside" the TR element.
Also notice I have removed the Ajax call since simulating that is a pain and have included the JSON in the snippet as a variable you should be able to take the foeach snippet and apply it to your own code with the data coming from AJAX.
$.each(data, function(key, val) {
$('table > tbody').append('<tr><td>' + val.pname + '</td><td>' + val.pcode + '</td> <td>' + val.pdosage + '</td><td>' + val.pdisc +
'</td><td class="test"></td><td id="td' + val.pid + '"></td></tr>')
console.log(val.puse);
$.each(val.puse, function(key, valb) {
$('table > tbody td:nth-child(4) ').append('<div>' + valb.adDate + " " + valb.adTime + '</div>')
});
});
https://codepen.io/anon/pen/ZRyPGR?editors=1010#0
var data = [{ "pid": "1", "pcode": "drug-001", "pname": "Abacavir (ABC) ", "pdosage": "3/4/4", "puse": [{ "adDate": "2018-06-11", "adTime": "19:01:06" }, { "adDate": "2018-06-11", "adTime": "19:01:06" } ] }, { "pid": "2", "pcode": "drug-002", "pname": "Abacavir (ABC) ", "pdosage": "3/4/4", "puse": [{ "adDate": "2018-06-11", "adTime": "19:01:06" }, { "adDate": "2018-06-11", "adTime": "19:14:26" } ] }, { "pid": "3", "pcode": "drug-003", "pname": "aB-Artemether Injection", "pdosage": "3/4/4", "puse": [{ "adDate": "2018-06-11", "adTime": "19:01:06" }] }, { "pid": "4", "pcode": "drug-004", "pname": "Acetazolamide", "pdosage": "3/4/4", "puse": [] }, { "pid": "5", "pcode": "drug-005", "pname": "Acetazolamide", "pdosage": "3/4/4", "puse": [] }] //wrap this in your ajax success callback $.each(data, function(key, val) { $('table > tbody').append('<tr><td>' + val.pname + '</td><td>' + val.pcode + '</td> <td>' + val.pdosage + '</td><td>' + val.pdisc + '</td><td class="test"></td><td id="td' + val.pid + '"></td></tr>') console.log(val.puse); $.each(val.puse, function(key, valb) { $('table > tbody td:nth-child(4) ').append('<div>' + valb.adDate + " " + valb.adTime + '</div>') }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <html> <table class="table table-inline"> <tbody> </tbody> </table> </html>
solution2
0 2018-06-13 21:13:13
You were pretty close! Here's a slightly different approach that programmatically creates jQuery objects for easier usage, rather than building up a huge string. Here's an example pen: https://codepen.io/anon/pen/bKRJNj
var data = [ { "pid": "1", "pcode": "drug-001", "pname": "Abacavir (ABC) ", "pdosage": "3/4/4", "puse": [ { "adDate": "2018-06-11", "adTime": "19:01:06" }, { "adDate": "2018-06-11", "adTime": "19:01:06" } ] }, { "pid": "2", "pcode": "drug-002", "pname": "Abacavir (ABC) ", "pdosage": "3/4/4", "puse": [ { "adDate": "2018-06-11", "adTime": "19:01:06" }, { "adDate": "2018-06-11", "adTime": "19:14:26" } ] } // Truncated for readability ] $(function() { // Save a reference to the table rather than query the DOM for each loop of .each() var $table = $('#PatientTreatment tbody') var tableRows = [] $.each(data, function(index, value) { var $tr = $('<tr />'); var $pNameTd = $('<td />').text(value.pname) var $pCodeTd = $('<td />').text(value.pcode) var $pDosageTd = $('<td />').text(value.pdosage) var $pIdTd = $('<td />').text(value.pid) var $pUseTd = $('<td />') $.each(value.puse, function(index2, value2) { var $div = $('<div />').text(value2.adDate + ' ' + value2.adTime) // Put each DIV in the TD $pUseTd.append($div) }) // Put all of the TDs in the TR $tr.append([$pNameTd, $pCodeTd, $pDosageTd, $pIdTd, $pUseTd]) tableRows.push($tr) }) // Put all of the TRs in the TABLE $table.append(tableRows) })
<html> <head></head> <body> <table id="PatientTreatment"> <thead> <tr> <th>Name</th> <th>Code</th> <th>Dosage</th> <th>ID</th> <th>Uses</th> </tr> </thead> <tbody> <!-- Rows dynamically inserted here --> </tbody> </table> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </body> </html>
Hope that helps, and good luck!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.