Javascriptで表に列を追加する

Question

私は、ユーザーが行ったイベントの概要を示す表を作成しています。私はこれのためのテーブルを作成しました。私が知りたいことは、彼が特定のイベントに登録されていて、それらのイベントを表示している場合、ユーザーIDに基づいてチェックすることです。

は、ここに私の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); 

} 

！

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で私のコードです：Screenshot of my result