Динамически создавать строки с данными в jquery

Question

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

Эта новая строка будет содержать всю информацию с входов и кнопку удаления.

 <div class="container eventContainer"> 
     <table class="event"> 
      <thead class="titleContainer"> 
       <tr> 
        <td class="titleEvent">Event</td> 
        <td class="titleStartDate">Start Date</td> 
        <td class="titleEndDate">End date</td> 
        <td class="titleButton"></td> 
       </tr> 
      </thead> 
      <tbody class="eventInputMain"> 
       <tr> 
        <td class="eventInput"> 
         <input type="text" name="Event" /> 
        </td> 
        <td class="startDateInput"> 
         <div> 
          <input type="text" id="startDatePicker"> 
          <div class="inputImage"></div> 
         </div> 
        </td> 
        <td class="endDateInput"> 
         <input type="text" id="endDatePicker"> 
         <div class="inputImage"></div> 
        </td> 
        <td class="eventAdd"> 
         <div class="eventAddIcon"> 
          <div class="icon32 add"></div> 
         </div> 
        </td> 
       </tr> 

      </tbody> 

     </table> 

    </div> 

Answer 1

1. Вы должны предотвратить событие по умолчанию щелчок по кнопке.
2. Вы должны добавить новый div, где будете размещать информацию.
3. Когда кнопка нажата, вы будете использовать $ (element) .val().
4. Отображение данных в новый div с помощью $ (element) .html().

P.S: Если вы хотите, я могу порекомендовать книгу для новичков.

HTML:

<div id="dataAnchor"> </div> 

JS:

$('#button').click(function(event){ 
    event.preventDefault(); 
    $('#dataAnchor').html($('#event').val() + $('#startDate').val() + $('#endDate').val()); 
} 

Answer 2

Надежда этот код помогает

var trElement = $('<tr/>'); 
trElement.append('<td>'+$('#event').val()+'</td>'); 
trElement.append('<td>'+$('#startDatePicker').val()+'</td>'); 
trElement.append('<td>'+$('#endDatePicker').val()+'</td>'); 
trElement.append('<td><div class="eventAddIcon"><div class="icon32 remove"></div></div></td>'); 
$('.eventInputMain').append(trElement); 

Благодаря