Cannot append Table Rows to dynamically created Table Rows
Hi,
i am looping through a JSON response and creating and table with an image in each row. When the user clicks on this icon, i start another ajax call and get the child results for this row.
I see the result in the console when i do a console.log.
But i am not able to do an .append on the .closest("tr"). Whats is wrong here? Here is my code:
- $(document).ready(function () {
- var url = location.protocol + "//" + location.host + L_Menu_BaseUrl;
- var JSONService = url + "/_vti_bin/GPExt/GPService.svc";
- $.getJSON(JSONService + "/GetTeil", function (data) {
- //
- })
- .done(function (data) {
- if ((data !== undefined) && (data !== null)) {
- var htmlTable = "<table id=\"tblGP\" style=\"width:100%;border:1px solid #ccc;\">";
- htmlTable += "<tr>";
- htmlTable += "<th>Location</th>";
- htmlTable += "</tr>";
- $.each(data.GetTeilResult, function (i, item) {
- htmlTable += " <tr>";
- htmlTable += " <td colspan=\"16\"><img id=\"expandteil\"
- rc=\"/_layouts/images/GpExt/plus.png\" /> " + item.teile + "</td>";
htmlTable += " </tr>";
- });
- htmlTable += "</table>";
- $(htmlTable).appendTo("#mainDataTable");
-
- $("#expandteil").click(function () {
- $.getJSON(JSONService + "/GetNachw/" + encodeURIComponent('bog, ya'), function (data) {
- //
- })
- .done(function (data) {
- if ((data !== undefined) && (data !== null)) {
- var row = $(this).closest("tr");
- $.each(data.GetNachwResult, function (j, itemNachw) {
- var htmlRow = "<tr>";
- htmlRow += "<td colspan=\"16\"><img id=\"sad\" src=\"/_layouts/images/GPExt/plus.png\" />" + itemNachw.Bezeichnung + "</td>";
- htmlRow += "</tr>";
- $(row).append(htmlRow);
- });
- } else {
- alert("Keine Nachw vorhanden!");
- };
- });
- });
- console.log("Finished teil ....")
- } else {
- alert("Keine Daten vorhanden!");
- };
- });
- });
var row = $(this).closest("tr");
is undefined
regards
Yavuz