Javascript JQuery在行中添加和保存输入的数据

我在保存新行时遇到了麻烦。当我点击AddPerson时，我可以输入数据，但是，我不知道如何保存数据并添加新行

我知道我必须为“保存”按钮创建一个功能，但是我一直在思考如何让它工作。我试过几次，但都没用

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); 

}

var isNewLineToggled=false；
var Isascing={
姓名：false，
姓：假，
多布：错
};
$（“.main”）.append（“

”）
$（“.main”）.append（“添加一个人

”）
变量表=$（“.main”）.append（“”）；
var thead=“”；
表1.追加（thead）；
变量头=[
{title:'Name'，sortBy:'Name'}，
{title:'Last Name'，sortBy:'lastName'}，
{标题：'出生日期'，排序为：'dob'}
].地图(
函数（标题）{
var sortButton='/\\'；
$（'thead'）.append（“”+header.title+“”+sortButton+“”）；
}
)
var tbody=“”；
var data=[{name:'Peter'，lastName:'Petterson'，dob:'13/12/1988'}，
{姓名：'Anna'，姓氏：'Jones'，出生日期：'06/02/1968'}，
{姓名：'John'，姓氏：'Milton'，出生日期：'01/06/2000'}，
{姓名：'James'，姓氏：'White'，出生日期：'30/11/1970'}，
{姓名：'Luke'，姓氏：'Brown'，出生日期：'15/08/1999'}
];
$（'.search'）.change（函数（事件）{
searchedName=event.target.value；
})
表.追加（t正文）；
data.map(
功能（第一行）{
$（'tbody'）。追加(
''+row.name+
''+row.lastName+
''+row.dob+
“编辑删除”
)
}
)
var editableRow=“保存”；
var addPerson=函数（）{
isNewLineToggled=！isNewLineToggled；
如果（isNewLineToggled）{
$（'tbody'）。前缀（“”+editableRow+“”）
}否则{
$（'tbody>tr:first child'）.remove（）；
}
}
var editRow=函数（行编号）{
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）；
}

您可以像这样添加行，两个小更改：

$（“.main”）.append（“添加一个人

”）

删除内联事件处理程序，无需它。您的功能可以是：

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

$（'body'）。在（'click'，'.add'，function（）{//上，由于动态添加了元素，您将需要事件委派
isNewLineToggled=！isNewLineToggled；
如果（isNewLineToggled）{
$（'tbody'）。前缀（“”+editableRow+“”）
}否则{
$（'tbody>tr:first child'）.remove（）；
}
});

由于未定义editableRow变量，因此我仅使用了一个带有文本的单元格进行演示：

---

另外，您的editableRow应具有输入值，并正确放置在单元格中。应该不会太难。

我有一个“保存按钮”，用于打印另一行，其中包含通过添加其他人输入的数据。如何使用该事件处理程序来实现这一点？我已编辑代码以显示this@EyedFox1，类似的逻辑。。。但是，您必须添加字段验证，以防止重复等。。。但是，这是最基本的想法。谢谢@sinisakeI。我还有一个问题。当我点击编辑。我希望显示此人的出生日期，而不是显示格式。此外，“保存”按钮不再工作。对此很抱歉，只是我对jqueryConsole.log所有变量、调试代码和检查得到的值都是新的。如我所见，编辑和删除按钮根本不起作用？如果这是为了某项工作，我真的建议使用一些插件（从零开始编写代码并不难，但这肯定是一项耗时的工作），如果目的是为了学习——试试我上面描述的…：）