JQuery adding and saving data input in row

351
January 30, 2017, at 02:19 AM

I am having trouble saving the new row. When i click on add person I am able to input the data, however, i am not sure how to save it and add a new row.

I know i have to make a function for the save button to work however i am stuck on how to make it work. I have tried a few times but to no avail.

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

You can add row like this, two small changes:

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

Remove inline event handler, no need for it. And your function could be:

$('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();
                }
                });

Since your editableRow variable isn't defined, i've used just one cell with text for demo:

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

P.S. Your editableRow should have input(s) values, properly placed in cells. Shouldn't be too hard.

Rent Charter Buses Company
READ ALSO
How to get ReactJs to work with FullCalendar

How to get ReactJs to work with FullCalendar

I'm having a hard time getting FullCalendar to work properly with ReactJsThe calendar shows up but it does not look correct and passing in arguments to $("#calendar")

786
Prevent redirect/ refresh after submit in popup window

Prevent redirect/ refresh after submit in popup window

I'm trying to make a login and signup form in the same popup window and the problem is, when I press login button or signup button, it just closes the popup window

290
creating svg element in codepen

creating svg element in codepen

I tried to create svg element using d3js in code pen using following code spinet but it did not work for me, infect the height and width was were getting applied to the element as expected

432