Question

<html>
<head>
<link rel="stylesheet" type="text/css" href="my_style.css"/>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">

$(document).ready(function(){
  $("#addButton").click(function(){

  var n1=$("#first_name").val();
  var n2=$("#last_name").val();

    $("#table_dynamic").append("<tr><td>"+n1+"</td>"+"<td>"+n2+"</td></tr>");

  });
  $("#updateButton").click(function(){

  });
  $("#updateButton").click(function(){

  });
}); 

</script>
<h1>My First JavaScript Application</h1>
<h2>Adding and Removing Contents Dynamically</h2>

</head>

<body>
<form>
<table align="center" border="1" id="table_static">
    <tr> 
        <td>First Name : </td>
        <td> <input type="text" name="first_name" id="first_name" /></td>
    </tr>
    <tr>
        <td>Last Name:</td>
        <td> <input type="text" name="last_name" id="last_name" /></td>
    </tr>
    <tr>
        <td>
            <input id="addButton" type="button" value="AddRow"/>
            <input id="updateButton" class="hidden" type="button" value="Update" disabled/>
        </td>
        <td>
            <input id="deleteButton" type="button" value="Delete" name="Delete" disabled/>
        </td>
    </tr>
</table>
<br/>
<table id="table_dynamic" width="50%" align="center" bo`enter code here`rder="1px">
    <thead>
    <tr>
        <td> First Name</td>
        <td> Last Name</td>
    </tr>
    </thead>
</table>

</form>
</body>
</html>

我想生成动态表，使用我们可以处理的添加，更新，删除按钮，这里我编写了添加行的代码.......但我想在选择特定行后删除/更新该行，我将如何做，请帮助我。

Answer 1

当您将内容附加到$("#table_dynamic")时，您可以使用div / span将类/ ID附加到要添加的内容，并使用此功能可以删除元素： -

$( ".classname" ).remove(); // for class
$( "#divname" ).remove(); // for div

Answer 2

在此为您制作了可用的版本： Fiddle 代码可以改进很多，但至少你有一些东西要开始：

$(document).ready(function () {
    $("#addButton").click(function () {

        var n1 = $("#first_name").val();
        var n2 = $("#last_name").val();

        $("#table_dynamic").append('<tr><td>' + n1 + '</td><td>' + n2 + '</td><td><input class="updateButton" type="button" value="Update"/></td><td><input class="deleteButton" type="button" value="Delete" name="Delete"/></td></tr>');

    });
    $(document).on("click", ".updateButton", function (e) {
        var n1 = $("#first_name").val();
        var n2 = $("#last_name").val();

        var target = e.target;
        $(target).closest('tr').html('<td>' + n1 + '</td><td>' + n2 + '</td><td><input class="updateButton" type="button" value="Update"/></td><td><input class="deleteButton" type="button" value="Delete" name="Delete"/></td>');


    });
    $(document).on("click", ".deleteButton", function (e) {
        var target = e.target;
        $(target).closest('tr').remove();

    });
});

使用jquery动态地将表行转移到另一个表

2 个答案: