个人中心
gpt4 book ai didi

javascript - JS/JQuery 编辑/更新表格行

转载 作者：行者123 更新时间：2023-12-03 00:23:40 25 4
gpt4 key购买 nike

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

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

我的表格如下所示:

enter image description here

按钮“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>

更新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>

最佳答案

如果没有看到您的 HTML，我们就无法确切知道您需要做什么。但下面的说法肯定是错误的:

$("table tbody").find("input [name=record]")

此选择器正在查找 name 为 record 的任何元素，该元素是 input 元素的后代。这显然没有意义(输入没有子项)，我认为你的意思是:

$("table tbody").find("input[name='record']")

这将查找所有具有 name 属性为 record 的 input 元素。是的，空间或缺乏空间会带来很大的不同! (我还在值周围添加了引号，我认为这也是必需的。)

PS 我还没有详细检查其余代码，因此可能还有其他错误。正如我所说，我们需要您的 HTML 来测试它。

编辑:我刚刚注意到另一个错误。您有 $("btn3").click(...) - 这应该是 $("#btn3").click(...)。不过还是感谢您添加了 Html。

关于javascript - JS/JQuery 编辑/更新表格行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54195661/

25 4 0
文章推荐： python-3.x - 如何使用python播放声音并且没有while循环
文章推荐： javascript - 如何让我的按钮导航到不同的页面？
文章推荐： javascript - Openlayers 不重新投影 WMS 查询
文章推荐： javascript - 如何在网页中将数字转换为印度卢比格式，例如 10,000.00
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com