添加删除表行到另一个表动态使用jQuery

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

我要生成动态表，使用添加，更新，删除按钮，我们可以处理它，在这里我写的代码添加行.......但我想删除/更新该行后选择行，我将如何做，PLZ帮助我。添加删除表行到另一个表动态使用jQuery

来源

2014-02-09 user3289283

你可以使用** [内容编辑（HTTPS：//developer.mozill a.org/en-US/docs/Web/Guide/HTML/Content_Editable)**来更新每个单元格，就像删除每行一样：http://jsfiddle.net/hashem/HKeja/ –

当你追加到$("#table_dynamic")可以附加一个类/ id来您正在使用DIV/SPAN并使用此功能附加内容的内容，你可以删除元素： -

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

来源

2014-02-09 09:52:37

但是我怎样才能得到类/精确选择行的ID？ – user3289283

制备的工作版本供您在这里：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(); 

    }); 
});

来源

2014-02-09 10:06:55 Jonathan

添加删除表行到另一个表动态使用jQuery

回答

相关问题