使用jquery动态添加表中的行 [英] Adding rows in the table dynamically using jquery
本文介绍了使用jquery动态添加表中的行的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有2个文本框，我希望在点击保存按钮后将该值添加到表格的列中。
问题：我已经这样做但问题是当我在表格中添加第二行时，第一行值也会被第二行值替换。
这是我的代码，
请帮助我..先谢谢。
Hi,
I have 2 textboxes and through that i want to add that value to the column of the table once I clicked on Save button.
problem: I have done that but problem is when I added second row in the table then first row values gets replaced with second row value as well.
here is my code,
Kindly help me .. Thanks in Advance.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
table,tr,td
{
border:1px solid red;
}
</style>
<script>
$(document).ready(function(){
$("#btn").click(function(){
var a1=$("#txt_Name").val();
var b1=$("#txt_Salary").val();
$(".spanFname").text(a1);
$(".spanSal").text(b1);
var test=$("#testDiv").html();
$("#tbl").append(test);
});
});
</script>
</head>
<body>
<div>
<table id="tbl">
<tr>
<td>
<input type="checkbox" name="selectAll" value="All"><br>
</td>
<td>Name</td>
<td>Salary</td>
<td>Buttuons</td>
</tr>
</table>
</div>
<div>
<br/>
<label>Name: </label>
<input type="textbox" id="txt_Name"/>
<br/>
<label>Salary: </label>
<input type="textbox" id="txt_Salary"/>
<br/>
<input type="button" id="btn" value="Add Row"/>
</div>
<div style="display:none;" id="testDiv">
<tr id="testTr">
<td><input type="checkbox" name="selectAll" value="All"></td>
<td><span class="spanFname"></span></td>
<td><span class="spanSal"></span> </td>
<td><input type="button" value="Edit"></td>
</tr>
</div>
<br/><br/>
</body>
</html>
推荐答案
（ document ） .ready（ function （）{
(document).ready(function(){
（ ＃btn）。click（ function （）{
var a1 =
("#btn").click(function(){ var a1=
（ ＃ txt_Name）VAL（）;
var b1 =
("#txt_Name").val(); var b1=
这篇关于使用jquery动态添加表中的行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
