Looping через таблицу возвращает неопределенные результаты

Question

Мне нужно сделать раскрывающийся список действий, которые пользователь может удалить. Действия проводятся в таблице, которую я пытаюсь перебрать, но я чувствую, что я почти там. Я использую Bootstrap 3 и jQuery. Я все еще новичок в jQuery.

Вот HTML я использую, чтобы создать модальное окно, так что я могу поставить контроль там:

<div id="delete-activity-modal" class="modal fade" role="dialog"> 
    <div class="modal-dialog modal-lg"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <h1>Delete Activity</h1> 
      </div> 
      <div class="modal-body"> 
       <div class="input-group"> 
        <span class="input-group-addon" id="add-addon-styling">Choose Activity</span> 
        <select class="form-control" id="delete-activity-modal-dropdown"> 
         <!-- Options Added via content-controller.js --> 
        </select> 
        <span class="input-group-addon" data-toggle="tooltip" data-placement="top" 
          title="Choose the activity from the drop-down menu you want to delete."> 
         <b>?</b> 
        </span> 
       </div> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-danger btn-bg" data-dismiss="modal">Close</button> 
      </div> 
     </div> 
    </div> 
</div> 

Как вы видите выше, это то, что я выберусь. Я должен был иметь 6 результатов, и они должны иметь идентификатор активности и имя, но они возвращаются как неопределенные, так что я, вероятно, делают это неправильно: P

Вот функция, я использую, чтобы сделать содержание выпадающего:

function CreateActivityDeleteDropdown() { 
    var dropdown = $('#delete-activity-modal-dropdown'); 
    $('#activityTable').each(function() { 
     var activityId = $(this).attr("#activityId"); 
     var activityName = $(this).attr("#activityName"); 
     var dropdownDescription = activityId + " | " + activityName; 
     var dropdownElement = '<option value="' + activityId + '">' + dropdownDescription + '</option>'; 
     $(dropdown).append(dropdownElement); 
    }); 
} 

Эта функция вызывается только при нажатии кнопки, поэтому таблица существует, когда я это делаю. В таблице, что мне нужно просматривать динамически добавляется, когда сайт нагрузок, как это:

function GetActivityAbstracts() { 
    $.getJSON(, function (testData) { 
     var object = $.parseJSON(testData); 
     var activityTable = '<tbody id="activityTable"></tbody>'; 
     $.each(object, function() { 
      var activityId = this['ActivityId']; 
      var activityName = this['ActivityName']; 
      var activityResponsible = this['Responsible']; 
      var activityEstimatedSavings = parseFloat(this['EstimatedSavings']).toFixed(2); 
      var activityEstimatedStart = this['EstimatedStart']; 
      var activityEstimatedEnd = this['EstimatedEnd']; 
      var activityStatus = this['Status']; 
      // TODO: Make more user-friendly Status Descriptions instead of C# enum values. 
      var tableElement = 
        '<tr>' + 
        '<td id = "activityId" style = "vertical-align: middle; align: center;">' 
        + activityId + '</td>' + 
        '<td style = "vertical-align: middle;">' + 
        '<div class="status-circle" data-toggle="tooltip" data-placement="right"' + 
        'title=" ' + activityStatus + '" style="background-color:' + 
        GetColumnColor(activityStatus) + ';"></div></td>' + 
        '<td id = "activityName" style = "vertical-align: middle;">' 
        + activityName + '</td>' + 
        '<td style = "vertical-align: middle;">' 
        + activityResponsible + '</td>' + 
        '<td style = "vertical-align: middle;">' 
        + activityEstimatedSavings + '</td>' + 
        '<td style = "vertical-align: middle;">' 
        + activityEstimatedStart + '</td>' + 
        '<td style = "vertical-align: middle;">' 
        + activityEstimatedEnd + '</td>' + 
        '</tr>'; 
      activityTable += tableElement; 
     }); 
     $('#current-data-table').append(activityTable); 

     /* This call is necessary because the table is added dynamically */ 
     $('[data-toggle="tooltip"').tooltip(); 
    }); 
} 

Результат:

Некоторые JSON Sample данные:

"{\"1\":{\"ActivityId\":1,\"ActivityName\":\"Noget Med Penge\",\"Responsible\":\"Name\",\"EstimatedSavings\":9001.0,\"EstimatedStart\":\"19-11-2015\",\"EstimatedEnd\":\"01-01-2016\",\"Status\":\"NA\"},\"2\":{\"ActivityId\":2,\"ActivityName\":\"We need to shut down the bluetooth RAM hard drive!\",\"Responsible\":\"Name\",\"EstimatedSavings\":24589.0,\"EstimatedStart\":\"23-05-2014\",\"EstimatedEnd\":\"10-12-2015\",\"Status\":\"ON_TRACK\"},\"3\":{\"ActivityId\":3,\"ActivityName\":\"We need to encode the wireless RAM interface!\",\"Responsible\":\"Name\",\"EstimatedSavings\":874561.0,\"EstimatedStart\":\"11-04-1970\",\"EstimatedEnd\":\"22-01-2016\",\"Status\":\"DONE\"},\"4\":{\"ActivityId\":4,\"ActivityName\":\"We need to reboot the open-source PNG program!\",\"Responsible\":\"Name\",\"EstimatedSavings\":812654.0,\"EstimatedStart\":\"18-08-2000\",\"EstimatedEnd\":\"19-04-2016\",\"Status\":\"ISSUE\"},\"5\":{\"ActivityId\":5,\"ActivityName\":\"We need to program 
the mobile CPU bus!\",\"Responsible\":\"Name\",\"EstimatedSavings\":-47998.0,\"EstimatedStart\":\"29-07-1982\",\"EstimatedEnd\":\"22-05-2016\",\"Status\":\"BEHIND\"},\"6\":{\"ActivityId\":6,\"ActivityName\":\"We need to network the optical GB port!\",\"Responsible\":\"Name\",\"EstimatedSavings\":74511.0,\"EstimatedStart\":\"23-10-1992\",\"EstimatedEnd\":\"27-09-2016\",\"Status\":\"ABANDONED\"}}" 

Answer 1

Прежде всего GetActivityAbstracts будет создавать дубликаты id с, как я сказал. В приведенном выше коде <td id = "activityId" и <td id = "activityName" внутри $.each будет дублироваться. Кроме того, использование .find вместо .attr найти элементы внутри каждого tr Таким образом, вы либо изменить id к классу или добавить index из .each для создания уникальных id с.

function GetActivityAbstracts() { 
    $.getJSON(, function (testData) { 
     var object = $.parseJSON(testData); 
     var activityTable = '<tbody id="activityTable"></tbody>'; 
     $.each(object, function (index,value) { 
      //index here is used to generate unique ids 
      var activityId = this['ActivityId']; 
      var activityName = this['ActivityName']; 
      var activityResponsible = this['Responsible']; 
      var activityEstimatedSavings = parseFloat(this['EstimatedSavings']).toFixed(2); 
      var activityEstimatedStart = this['EstimatedStart']; 
      var activityEstimatedEnd = this['EstimatedEnd']; 
      var activityStatus = this['Status']; 
      // TODO: Make more user-friendly Status Descriptions instead of C# enum values. 
      var tableElement = 
        '<tr>' + 
        '<td id = "activityId_'+index+'" style = "vertical-align: middle; align: center;">' 
        + activityId + '</td>' + 
        '<td style = "vertical-align: middle;">' + 
        '<div class="status-circle" data-toggle="tooltip" data-placement="right"' + 
        'title=" ' + activityStatus + '" style="background-color:' + 
        GetColumnColor(activityStatus) + ';"></div></td>' + 
        '<td id = "activityName_'+index+'" style = "vertical-align: middle;">' 
        + activityName + '</td>' + 
        //Add index for ids here 
        '<td style = "vertical-align: middle;">' 
        + activityResponsible + '</td>' + 
        '<td style = "vertical-align: middle;">' 
        + activityEstimatedSavings + '</td>' + 
        '<td style = "vertical-align: middle;">' 
        + activityEstimatedStart + '</td>' + 
        '<td style = "vertical-align: middle;">' 
        + activityEstimatedEnd + '</td>' + 
        '</tr>'; 
      activityTable += tableElement; 
     }); 
     $('#current-data-table').append(activityTable); 

     /* This call is necessary because the table is added dynamically */ 
     $('[data-toggle="tooltip"').tooltip(); 
    }); 
} 

Теперь, как только у вас есть эта уникальные элементы сгенерированные вы можете цикл через каждый tr ы, как показано ниже:

function CreateActivityDeleteDropdown() { 
    var dropdown = $('#delete-activity-modal-dropdown'); 
    $('tbody#activityTable tr').each(function() { 
     var activityId = $(this).find("td [id^='activityId']").text(); 
     //get value from the td whose id starts with activityId 
     var activityName = $(this).find("td [id^='activityName']").text(); 
     //get value from the td whose id start with activityName 
     var dropdownDescription = activityId + " | " + activityName; 
     var dropdownElement = '<option value="' + activityId + '">' + dropdownDescription + '</option>'; 
     $(dropdown).append(dropdownElement); 
    }); 
} 

Теперь, если вы измените td «s id к class, как показано ниже:

function GetActivityAbstracts() { 
    $.getJSON(, function (testData) { 
     var object = $.parseJSON(testData); 
     var activityTable = '<tbody id="activityTable"></tbody>'; 
     $.each(object, function() { 
      var activityId = this['ActivityId']; 
      var activityName = this['ActivityName']; 
      var activityResponsible = this['Responsible']; 
      var activityEstimatedSavings = parseFloat(this['EstimatedSavings']).toFixed(2); 
      var activityEstimatedStart = this['EstimatedStart']; 
      var activityEstimatedEnd = this['EstimatedEnd']; 
      var activityStatus = this['Status']; 
      // TODO: Make more user-friendly Status Descriptions instead of C# enum values. 
      var tableElement = 
        '<tr>' + 
        '<td class = "activityId" style = "vertical-align: middle; align: center;">' 
        + activityId + '</td>' + 
        '<td style = "vertical-align: middle;">' + 
        '<div class="status-circle" data-toggle="tooltip" data-placement="right"' + 
        'title=" ' + activityStatus + '" style="background-color:' + 
        GetColumnColor(activityStatus) + ';"></div></td>' + 
        '<td class= "activityName" style = "vertical-align: middle;">' 
        + activityName + '</td>' + 
        '<td style = "vertical-align: middle;">' 
        + activityResponsible + '</td>' + 
        '<td style = "vertical-align: middle;">' 
        + activityEstimatedSavings + '</td>' + 
        '<td style = "vertical-align: middle;">' 
        + activityEstimatedStart + '</td>' + 
        '<td style = "vertical-align: middle;">' 
        + activityEstimatedEnd + '</td>' + 
        '</tr>'; 
      activityTable += tableElement; 
     }); 
     $('#current-data-table').append(activityTable); 

     /* This call is necessary because the table is added dynamically */ 
     $('[data-toggle="tooltip"').tooltip(); 
    }); 
} 

Вы можете использовать только .find снова, чтобы получить соответствующую td с class, как показано ниже:

function CreateActivityDeleteDropdown() { 
    var dropdown = $('#delete-activity-modal-dropdown'); 
    $('#activityTable tr td').each(function() { 
     var activityId = $(this).find(".activityId").text(); 
     var activityName = $(this).find(".activityName").text(); 
     //getting using class 
     var dropdownDescription = activityId + " | " + activityName; 
     var dropdownElement = '<option value="' + activityId + '">' + dropdownDescription + '</option>'; 
     $(dropdown).append(dropdownElement); 
    }); 
} 

---

Update

Некоторые больше проблем, выявленных при создании DEMO

Вы имели var activityTable = '<tbody id="activityTable"></tbody>';, а затем в конец, как только вы создадите строку, которую вы используете, чтобы сделать activityTable += tableElement;. Так как "activityTable variable already had activityTable + = used to append as ... which is why a new TBODY was getting created when appended to DOM . So either make it tbody` объект, делая, как показано ниже:

var activityTable = $('<tbody id="activityTable"></tbody>'); 

, а затем вы можете использовать .append для appendtr внутри созданного tbody, как показано ниже:

$(activityTable).append(tableElement); 

вместо activityTable += tableElement;

ИЛИ

Если вы предпочитаете держать свой путь, то просто добавьте </tbody> когда все rows были добавлены, как показано ниже:

var activityTable = '<tbody id="activityTable">'; // удалить отсюда

и после $.each отделки вы можете just do

activityTable+="</table>"; 

Answer 2

Редактировать (пример):

HTML:

<table> 
    <thead> 
     <th> 
      Activity ID 
     </th> 
     <th> 
      Status 
     </th> 
     <th> 
      Activity name 
     </th> 
    </thead> 
    <tbody id="activityTable"> 
    </tbody> 
</table> 

<select> 
</select> 

JS:

$(document).ready(function(){ 
    var JSONData = [[1,1,"name1"], [2,1,"name2"]]; 
    var html = ""; 
    var count = 0; 
    $.each(JSONData, function(){ 
     html += "<tr>"; 
     html += "<td data-type='id'>" + JSONData[count][0] + "</td>"; 
     html += "<td data-type='status'>" + JSONData[count][1] + "</td>"; 
     html += "<td data-type='name'>" + JSONData[count][2] + "</td>"; 
     html += "</tr>"; 
     count++; 
    }); 
    var createOption; 
    $("#activityTable").html(html); 
    $("select").html(""); 
    $("#activityTable tr").each(function(){ 
     var data_id = $(this).find("td[data-type=id]").html(); 
     var data_name = $(this).find("td[data-type=name]").html(); 
     createOption = "<option>" + data_id + " | " + data_name; 
     $("select").append(createOption); 
    }); 
}); 

Выход:

Демо: Click