1

I have multiple data returned from a php function. now I want to dynamically add rows on the modal to set the data.. hw can i do that,..? i already have one row defined on the modal with some css. I want to have the rows dynamically created with same css.

    <div class="modal-content">

        <div class="modal-header">
          <h3>New Learner</h3>
        </div>

        <div class="modal-body">

            <table class="pure-table">                  
              <tr class="table-header">
                <th>Name</th>
                <th>Student ID</th>                    
                <th>e-mail</th>  
                <th></th>                 
              </tr>

              <!-- Generates all students who match Below generated based on Query Results clicked -->

              <tr class="table-data pure-table-odd">                    
                <td id="new_search_email_name"></td>
                <td id="new_search_email_student_number"></td>                    
                <td id="new_search_email_email"></td> 
                <td><a href="#" class="right-align" data-toggle="modal" data-target="#registration-form">
             <button id="use_existing_learner" name="use_existing_learner" onClick="edit()" type="add" class="pure-button pure-button-primary"><span class="icon-font">&#xe046;</span> Use This Learner </button>
             <!-- this button needs to somehow load all the data for this one into the reg form modal -->
          </a></td>                   
              </tr>
            </table>

        </div>
Th4t Guy
  • 1,442
  • 3
  • 16
  • 28
Ankur
  • 25
  • 7

1 Answers1

0

You can get the DOM element which you need, In this case with class "table-data pure-table-odd". Then clone it.

Loop through the data you have from back end. Inject the name and other particulars into the object by using specific ids or order of the nodes.

And append it back to the node with class "pure-table".

You can get all the functions you need from JQuery. Like clone(), append() etc.

Hope this helps.

A sample code(not tested) is give below. Need to include the looping part from JSON.

var original_element = $("table-data pure-table-odd");
var clone_element = $(original_element).clone();

//name 1 and all comes from the json you have.
//you will have to loop through that data for this section
$(clone_element).find("td")[0].append("name 1"); 
$(clone_element).find("td")[1].append("student number 1"); 
$(clone_element).find("td")[2].append("email 1"); 
$(clone_element).find("td")[3].attr("id", "id 1"); 

$("pure-table").append(clone_element);
Hari
  • 310
  • 3
  • 14