Javascript JS/JQuery编辑/更新表格行_Javascript_Jquery_Html Table

Javascript JS/JQuery编辑/更新表格行

javascript jquery

Javascript JS/JQuery编辑/更新表格行,javascript,jquery,html-table,Javascript,Jquery,Html Table,我是一名初学者，正在尝试编写一个表，您可以在其中动态创建、编辑和删除tablerows。到目前为止，我可以创建tablerows并删除它们。我正在努力编写代码，因为编辑不起作用： $("btn3").click(function(){ $("table tbody").find("input [name=record]").each(function(){ if($(this).is(":checked")){ var myRow = readI

我是一名初学者，正在尝试编写一个表，您可以在其中动态创建、编辑和删除tablerows。到目前为止，我可以创建tablerows并删除它们。我正在努力编写代码，因为编辑不起作用：

$("btn3").click(function(){ 
    $("table tbody").find("input [name=record]").each(function(){
        if($(this).is(":checked")){
            var myRow = readInput();
            $(this).closest("tr").replaceWith("<tr><td><input type='checkbox' name='record'/></td><td>" + myRow.id + "</td><td>" +  
           myRow.name + "</td><td>" + myRow.surname + "</td><td>" + myRow.position + "</td><td>" + myRow.stat + "</td></tr>");
        }
    });
});

$（“btn3”）。单击（函数（）{
$（“表tbody”）.find（“输入[name=record]”）。每个（函数（）{
如果（$（this）.is（“：checked”））{
var myRow=readInput（）；
$（this）.closest（“tr”）.replace为（“+myRow.id+”）”
myRow.name+“”+myRow.name+“”+myRow.position+“”+myRow.stat+“”）；
}
});
});

我的桌子看起来像这样：

按钮“btn3”是可点击的，但没有发生任何事情。如果有人能帮助我，那就太好了

编辑：HTML部分：

</head>
<style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 60%;
}

td, th {
  border: 1px solid #dddddd;
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
</style>
<body>

<h2>Employee data</h2>
First Name:<input type="text" name="fname" id="fnameid" /><br/><br/>
Last Name:<input type="text" name="lname" id="lnameid" /><br/><br/>
Position:<input type="text" name="position" id="positionid" /><br/><br/>
Status:<input type="text" name="stat" id="statid" /><br/><br/>
<button id="btn1">New Employee</button>
<button id="btn2">Delete</button>
<button id="btn3">Update</button>

<table id = "employeeTable" class="display" style="width:60%">
  <thead>
  <tr>
    <th></th>
    <th>ID</th>
    <th>Name</th>
    <th>Surname</th>
    <th>Position</th>
    <th>Status</th>
  </tr>
  </thead>
  <tbody></tbody>
</table>


桌子{
字体系列：arial，无衬线；
边界塌陷：塌陷；
宽度：60%；
}
td，th{
边框：1px实心#dddddd；
边框：1px实心#dddddd；
文本对齐：左对齐；
填充：8px；
}
tr:n个孩子（偶数）{
背景色：#dddddd；
}
员工数据
名字：


姓氏：


职位：


状态：


新员工
删去
使现代化
身份证件
名称
姓
位置
地位

更新2: 现在编辑工作正常，但是，我无法删除以前编辑过的行…
代码如下所示：

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){

    function Row(id, name, surname, position, stat){
        this.id = id;
        this.name = name;
        this.surname = surname;
        this.position = position;
        this.stat = stat;
    }


    function readInput(){
        var fname = $("#fnameid").val();
        var lname = $("#lnameid").val();
        var position = $("#positionid").val();
        var stat = $("#statid").val();
        var nRow = new Row(new Date($.now()), fname, lname, position, stat);
        return nRow;
    }

    //new Employee 
    $("#btn1").click(function(){
        var myRow = readInput();
        $("table tbody").append("<tr><td><input type='checkbox' name='record'/></td><td>" + myRow.id + "</td><td>" +  
        myRow.name + "</td><td>" + myRow.surname + "</td><td>" + myRow.position + "</td><td>" + myRow.stat + "</td></tr>");
    });

    //delete
    $("#btn2").click(function(){
        $("table tbody").find("input[name='record']").each(function(){
            if($(this).is(":checked")){
                $(this).parents("tr").remove();
            }
        });
    });



    //update
    $("#btn3").click(function(){    
    var myRow = readInput();
        $("table tbody").find("input[name='record']").each(function(){
            if($(this).is(":checked")){
                var curRow = $(this).parent().parent()
                curRow.replaceWith("tr><td><input type='checkbox' name='record'/></td><td>" + myRow.id + "</td><td>" +  
               myRow.name + "</td><td>" + myRow.surname + "</td><td>" + myRow.position + "</td><td>" + myRow.stat + "</td></tr>");
            }
        });
    });
});

</script>
</head>
<style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 60%;
}

td, th {
  border: 1px solid #dddddd;
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
</style>
<body>

<h2>Employee data</h2>
First Name:<input type="text" name="fname" id="fnameid" /><br/><br/>
Last Name:<input type="text" name="lname" id="lnameid" /><br/><br/>
Position:<input type="text" name="position" id="positionid" /><br/><br/>
Status:<input type="text" name="stat" id="statid" /><br/><br/>
<button id="btn1">New Employee</button>
<button id="btn2">Delete</button>
<button id="btn3">Update</button>

<table id = "employeeTable" class="display" style="width:60%">
  <thead>
  <tr>
    <th></th>
    <th>ID</th>
    <th>Name</th>
    <th>Surname</th>
    <th>Position</th>
    <th>Status</th>
  </tr>
  </thead>
  <tbody>
  <tr>
</tr>
  </tbody>
</table>

<form id="newEmploy" 

<script>


</script>
</body>
</html>


$（文档）.ready（函数（）{
功能行（id、名称、姓氏、位置、状态）{
this.id=id；
this.name=名称；
this.姓氏=姓氏；
这个位置=位置；
this.stat=stat；
}
函数readInput（）{
var fname=$（“#fnameid”）.val（）；
var lname=$（“#lnameid”）.val（）；
变量位置=$（“#位置ID”）.val（）；
var stat=$（“#statid”）.val（）；
var nRow=新行（新日期（$.now（）），fname，lname，position，stat）；
返回nRow；
}
//新员工
$（“#btn1”）。单击（函数（）{
var myRow=readInput（）；
$（“表tbody”）.append（“+myRow.id+”）+
myRow.name+“”+myRow.name+“”+myRow.position+“”+myRow.stat+“”）；
});
//删除
$（“#btn2”）。单击（函数（）{
$（“表tbody”）.find（“输入[name='record']”）。每个（函数（）{
如果（$（this）.is（“：checked”））{
$（this.parents（“tr”）.remove（）；
}
});
});
//更新
$（“#btn3”）。单击（函数（）{
var myRow=readInput（）；
$（“表tbody”）.find（“输入[name='record']”）。每个（函数（）{
如果（$（this）.is（“：checked”））{
var curRow=$（this.parent（）.parent（）
curRow.replaceWith（“tr>”+myRow.id+”+
myRow.name+“”+myRow.name+“”+myRow.position+“”+myRow.stat+“”）；
}
});
});
});
桌子{
字体系列：arial，无衬线；
边界塌陷：塌陷；
宽度：60%；
}
td，th{
边框：1px实心#dddddd；
边框：1px实心#dddddd；
文本对齐：左对齐；
填充：8px；
}
tr:n个孩子（偶数）{
背景色：#dddddd；
}
员工数据
名字：


姓氏：


职位：


状态：


新员工
删去
使现代化
身份证件
名称
姓
位置
地位
如果不查看HTML，我们无法确切地知道您需要做什么。但以下几点肯定是错误的：
$("table tbody").find("input [name=record]")

此选择器正在查找名称为记录的任何元素，该元素是输入
元素的后代。这显然没有意义（input
s没有子项），我想你的意思是：
$("table tbody").find("input[name='record']")

这将查找具有记录
属性的名称
的所有输入
元素。是的，这个空间或缺少它都会有很大的不同！（我还在值周围添加了引号，我认为这也是必需的。）
另外，我还没有详细检查代码的其余部分，所以可能还有其他错误。正如我所说，我们需要你的HTML来测试这一点
编辑：我刚刚注意到另一个错误。您有$（“btn3”）。单击（…）
-这应该是$（“#btn3”）。单击（…）
。感谢您添加Html。
$（“btn3”）
在引用ID时应为$（“#btn3”）。
此外，下面是一个简单的示例，说明我将如何做到这一点：

$（“#btn3”）。单击（函数（）{
$（“表tbody”）.find（.status:checked”）.each（函数（）{
var row=$（this）.parent（）.parent（）//这是行
第行替换为（“5ASDADFGDFGGSFSDFSFASD”）；
});
});
表格{
字体系列：arial，无衬线；
边界塌陷：塌陷；
宽度：60%；
}
td，th{
边框：1px实心#dddddd；
边框：1px实心#dddddd；
文本对齐：左对齐；
填充：8px；
}
tr:n个孩子（偶数）{
背景色：#dddddd；
}

员工数据
使现代化
身份证件
名称
姓
位置
地位
1.
控告
洛杉矶
人力资源
忙碌的
它是$（this.parent（）.parent（）.remove（）；