Добавить столбцы в таблицу в Javascript

Question

Я создаю таблицу, которая дает обзор событий, к которым пользователь пошел. Я создал таблицу для этого. То, что я хочу знать, это проверить на основе идентификатора пользователя, если он зарегистрирован для определенного события и отображает эти события.

Вот мой Html код:

<div id="modal2" class="modal modal-fixed-footer col l4 "> 
    <div class="modal-content col l4"> 
    <table class="centered bordered"> 
     <thead> 
     <tr> 
      <th data-field="id">Datum</th> 
      <th data-field="name">Event</th> 
     </tr> 
     </thead> 

     <tbody> 
     <tr> 
      <td id="datum">11/04/2014</td> 
      <td id="eventnaam">Cleantech</td> 
     </tr> 

     </tbody> 
    </table> 
    </div> 
    <div class="modal-footer"> 
    <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat ">Sluiten</a> 
    </div> 
</div> 

И это мой Javascript код:

var Append = function (waardes) {console.log("halloblo") 

var newEvent = $('#modal2').clone(true); 
newEvent.attr('id',waardes.ID); 
console.log(newEvent); 

var eventnaam = newEvent.find('#eventnaam'); 
eventnaam.text(waardes.Naam); 
console.log(eventnaam); 

var eventdatum = newEvent.find('#datum'); 
eventdatum.text(waardes.Datum); 

} 

Я уже проверил, если я пойду в мою функцию Append!

Answer 1

Вы просто попробуйте this

Я обновил свою скрипку с небольшим примером того, как вы могли бы сделать это.

Вы можете добавлять строки и столбцы

Html

<form name="myform" id="myform"> 
    <table id="blacklistgrid"> 
    <tr id="Row1"> 
     <td class="space">&nbsp;</td> 
     <td>Red</td> 
     <td>Yellow</td> 
     <td>Green</td> 
    </tr> 
    <tr id="Row2"> 
     <td> 
     <input type="text" placeholder="shade" name="shade" /> 
     </td> 
     <td> 
     <input type="checkbox" name="red" /> 
     </td> 
     <td> 
     <input type="checkbox" name="yellow" /> 
     </td> 
     <td> 
     <input type="checkbox" name="green" /> 
     </td> 
    </tr> 
    </table> 
    <button type="button" id="btnAdd">Add few more Rows!</button> 
</br> 
</br> 
<button type="button" id="btnAddCol">Add new column</button> 
</br> 
</br> 
<input type="submit"></input> 
</form> 

Jquery

$(document).ready(function() { 
    // Add Rows 
$('#btnAdd').click(function() { 
    var count = 3, 
    first_row = $('#Row2'); 
    while (count-- > 0) first_row.clone().appendTo('#blacklistgrid'); 
}); 
// Add Columns 
var myform = $('#myform'), 
iter = 0; 
$('#btnAddCol').click(function() { 
    myform.find('tr').each(function(){ 
    var trow = $(this); 
    if(trow.index() === 0){ 
     trow.append('<td>Col'+iter+'</td>'); 
    }else{ 
     trow.append('<td><input type="checkbox" name="cb'+iter+'"/></td>'); 
    } 
    }); 
    iter += 1; 
}); 
}); 

Css

td { 
    padding-right: 15px 
} 
.space { 
    padding-right: 75px; 
} 

Answer 2

Я попробовал этот код в JS:

var Append = function (waardes) { 
var first_row =$('#row2'); 
first_row.clone(true).appendTo('#modal2'); 

var eventnaam = first_row.find('#eventnaam'); 
eventnaam.text(waardes.Naam); 

var eventdatum = first_row.find('#datum'); 
eventdatum.text(waardes.Datum); 
} 

И это мой код в HTML:

<div id="modal2" class="modal modal-fixed-footer col l4 "> 
    <div class="modal-content col l4"> 
    <table class="centered bordered"> 
     <thead> 
     <tr> 
      <th data-field="id">Datum</th> 
      <th data-field="name">Event</th> 
     </tr> 
     </thead> 

     <tbody> 
     <tr id="row2"> 
      <td id="datum"></td> 
      <td id="eventnaam"></td> 
     </tr> 
     </tbody> 
    </table> 
    </div> 
    <div class="modal-footer"> 
    <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat ">Sluiten</a> 
    </div> 
</div> 

Это результат я получаю: Screenshot of my result