JQuery가 행에 데이터 입력 추가 및 저장

Question

새 행을 저장하는 데 문제가 있습니다. 내가 데이터를 입력 할 수있는 사람을 추가 클릭하면, 나는 그것을 저장하고 새 행을 추가하는 방법을 모르겠습니다.

나는 버튼을 작동시키기 위해 저장 기능을 만들어야한다는 것을 알고 있지만 어떻게 작동하게 만드는지 고집합니다. 몇 번 시도했지만 아무 소용이 없습니다.

var isNewLineToggled = false; 
var isAscending = { 
    name : false, 
    lastName: false, 
    dob: false 
}; 
$(".main").append("<input placeholder='search by name' class='search'/><br/><br/>") 
$(".main").append("<button onclick=addPerson()>add a person</button><br/><br/>") 
var table = $(".main").append("<table></table>"); 
var thead = '<thead><tr></tr></thead>'; 
table.append(thead); 
var header = [ 
    { title: 'Name', sortBy: 'name'}, 
    { title: 'Last Name', sortBy: 'lastName'}, 
    { title: 'Date of birth', sortBy: 'dob'} 
].map(
    function(header) { 
    var sortButton = '<button id="' + header.sortBy + '" onclick=sortRows("'+ header.sortBy + '")>/\\</button>'; 
     $('thead').append('<th>' + header.title + ' ' + sortButton + '</th>'); 
    } 
) 
var tbody = "<tbody></tbody>"; 
var data = [ {name: 'Peter', lastName: 'Petterson', dob: '13/12/1988'}, 
    {name: 'Anna', lastName: 'Jones', dob: '06/02/1968'}, 
    {name: 'John', lastName: 'Milton', dob: '01/06/2000'}, 
    {name: 'James', lastName: 'White', dob: '30/11/1970'}, 
    {name: 'Luke', lastName: 'Brown', dob: '15/08/1999'} 
]; 
$('.search').change(function(event) { 
    searchedName = event.target.value; 
}) 
table.append(tbody); 
data.map(
    function(row, i) { 
     $('tbody').append(
      '<tr><td>' + row.name + 
      '</td><td>' + row.lastName + 
      '</td><td>' + row.dob + 
      '</td><td><button onclick=editRow('+i+')>edit</button><button>delete</button></td></tr>' 
     ) 
    } 
) 
var editableRow = "<td><input/></td><td><input/></td><td><input type='date'/></td><td><button onclick=saveRow()>save</button></td>"; 

var addPerson = function() { 
    isNewLineToggled = !isNewLineToggled; 
    if (isNewLineToggled) { 
     $('tbody').prepend('<tr>' + editableRow + '</tr>') 
    } else { 
     $('tbody > tr:first-child').remove(); 
    } 
} 

var editRow = function(rowNumber) { 
    var name = $('tbody > tr:nth-child('+(rowNumber + 1)+') >  td:first-child').text(); 
    var lastName = $('tbody > tr:nth-child('+(rowNumber + 1)+') > td:nth-child(2)').text(); 
    var dob = $('tbody > tr:nth-child('+(rowNumber + 1)+') >  td:nth-child(3)').text(); 
    $('tbody > tr:nth-child('+(rowNumber + 1)+')').html(editableRow2); 
    $('tbody > tr:nth-child('+(rowNumber + 1)+') > td:first-child > input').val(name); 
    $('tbody > tr:nth-child('+(rowNumber + 1)+') > td:nth-child(2) > input').val(lastName); 

} 

Answer 1

당신은, 다음과 같이 두 개의 작은 변화를 행을 추가 할 수 있습니다

$(".main").append("<button class='add'>add a person</button><br/><br/>")

은 인라인 이벤트 핸들러, 그것에 대한 필요가 없습니다를 제거합니다. 그리고 함수가 될 수있다 :

당신의 editableRow 변수가 정의되지 않기 때문에, 내가 데모 텍스트가 하나 개의 셀을 사용했습니다

$('body').on('click','.add', function() { //you will need event delegation, because of dynamically added elements 
       isNewLineToggled = !isNewLineToggled; 

       if (isNewLineToggled) { 
        $('tbody').prepend('<tr>' + editableRow + '</tr>') 
       } else { 
        $('tbody > tr:first-child').remove(); 
       } 
       }); 

:

https://jsfiddle.net/2c97auey/1/

P.S. editableRow에는 셀에 올바르게 입력 된 값이 있어야합니다. 너무 열심히해서는 안됩니다.