[英]Add button dynamically to html table on row append to other table
Below code is working well to append row from one html table to other. 下面的代码很好地将行从一个html表追加到另一个。 But i want to add button dynamically to append row as well. 但是我想动态添加按钮以追加行。
$('#rootwizard').bootstrapWizard({
onTabShow: function(tab, navigation, index) {
if (index == 1) {
$('#tblPurchaseOrders').find('tr:has(td)').each(function() {
if (parseInt(($(this).find('#Quantity')).val()) > 0)
$(this).appendTo('#tbOrderDetail');
});
}
}
});
working example is on below link. 下面的链接是工作示例。
http://jsfiddle.net/ali_soltani/x4k7yhye/17/ http://jsfiddle.net/ali_soltani/x4k7yhye/17/
Not sure if this is what you want but you can check this script. 不确定这是否是您想要的,但是您可以检查此脚本。 I have added Add button in new table's action column. 我在新表的操作列中添加了添加按钮。
<div id="rootwizard">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul>
<li><a href="#details" data-toggle="tab">details</a></li>
<li><a href="#captain" data-toggle="tab">captain</a></li>
</ul>
</div>
</div>
</div>
<div class="tab-content">
<div class="tab-pane" id="details">
<div class="row">
<div class="col-sm-12">
<h4 class="info-text">
Let's start with the basic details.
</h4>
</div>
<div class="form-horizontal">
<div class="form-group">
<div class="col-md-12">
<div class="persons">
<table class="table table-condensed table-hover" id="tblPurchaseOrders">
<tr>
<th>
Product Code
</th>
<th>
SKU
</th>
<th>
Product Name
</th>
<th>
Quantity
</th>
</tr>
<tr>
<td>
<input type="text" name="ProductCode" value="A" class="form-control" />
</td>
<td>
<input type="text" name="SKU" value="A1" class="form-control" />
</td>
<td>
<input type="text" name="Name1" value="A1" class="form-control" />
</td>
<td>
<input type="text" id="Quantity" value="0" class="form-control" />
</td>
</tr>
<tr>
<td>
<input type="text" name="ProductCode" value="B" class="form-control" />
</td>
<td>
<input type="text" name="SKU" value="B1" class="form-control" />
</td>
<td>
<input type="text" name="Name1" value="B1" class="form-control" />
</td>
<td>
<input type="text" id="Quantity" value="1" class="form-control" />
</td>
</tr>
</table>
</div>
</div>
</div>
<hr />
</div>
</div>
</div>
<div class="tab-pane" id="captain">
<div class="row">
<div class="form-group">
<div class="col-md-12">
<table class="table table-condensed table-hover" id="tbOrderDetail">
<tr>
<th>
Product Code
</th>
<th>
SKU
</th>
<th>
Product Name
</th>
<th>
Quantity
</th>
<th>
Action
</th>
</tr>
</table>
</div>
</div>
</div>
</div>
<ul class="pager wizard">
<li class="previous first" style="display:none;"><a href="#">First</a></li>
<li class="previous"><a href="#">Previous</a></li>
<li class="next last" style="display:none;"><a href="#">Last</a></li>
<li class="next"><a href="#">Next</a></li>
</ul>
</div>
</div>
<div class="tab-content">
</div>
$(document).ready(function() {
$('#rootwizard').bootstrapWizard({
onTabShow: function(tab, navigation, index) {
if (index == 1) {
$('#tblPurchaseOrders').find('tr:has(td)').each(function() {
if (parseInt(($(this).find('#Quantity')).val()) > 0){
$(this).append("<td><input type='button' class='btn' value='Add' /></td>");
$(this).appendTo('#tbOrderDetail');
}
});
}
}
});
});
Let me know if that's your desired output? 让我知道这是否是您想要的输出?
Revert it back. 还原回来。
$(document).ready(function() {
$('#rootwizard').bootstrapWizard({
onTabShow: function(tab, navigation, index) {
if (index == 1) {
$('#tblPurchaseOrders').find('tr:has(td)').each(function() {
if (parseInt(($(this).find('#Quantity')).val()) > 0){
$(this).append("<td><input type='button' class='btn revertButton' value='Revert' /></td>");
$(this).appendTo('#tbOrderDetail');
}
});
}
}
});
$(document).on("click",".revertButton",function(){
var tr = $(this).parents("tr");
tr.find(".revertButton").parents("td").remove();
$("#tblPurchaseOrders").append(tr);
});
});
$(document).ready(function() {
$('#rootwizard').bootstrapWizard({
onTabShow: function(tab, navigation, index) {
if (index == 1) {
$('#tblPurchaseOrders').find('tr:has(td)').each(function() {
if (parseInt(($(this).find('#Quantity')).val()) > 0){
$(this).append("<td><input type='button' class='btn revertButton' value='Revert' /></td>");
$(this).appendTo('#tbOrderDetail');
}
});
}
}
});
$(document).on("click",".revertButton",function(){
var tr = $(this).parents("tr");
tr.find(".revertButton").parents("td").remove();
tr.find("#Quantity").val(0);
$("#tblPurchaseOrders").append(tr);
});
});
you should use Jquery, it is easy to use than pure javascript (i think so): 您应该使用Jquery,它比纯JavaScript容易使用(我认为是):
<tr id="row1"><td>....</td>
<td><button class="clickme" row-tag="row1">Your button</button></td></tr>
.....row2,row3....
<script>
$(document).ready(function(){
$(document).on('click','.clickme',function(){
var self = $(this);
//get your <tr> by id:
var yourtr = $("#"+self.attr("row-tag"));
//do something with this tr
})
})
</script>
Your questions is not so clear, so I assumed that you want to add a button that allows to add a new row, and then another button to append it to the next table. 您的问题不是很清楚,所以我假设您想添加一个允许添加新行的按钮,然后再添加一个按钮将其添加到下一个表。
This is how I did it: 这是我的方法:
<table class="templatetbl">
<tr class="template">
<td>
<input type="text" name="ProductCode" value="A" class="form-control" />
</td>
<td>
<input type="text" name="SKU" value="A1" class="form-control" />
</td>
<td>
<input type="text" name="Name1" value="A1" class="form-control" />
</td>
<td>
<input type="text" id="Quantity" value="0" class="form-control" />
</td>
<td>
<input type="button" id="appendRow" value="Append row" class="form-control" />
</td>
</tr>
</table>
I added a hidden template for the row and added a new button called "New Row": <a class="newRow form-control" href="#">New row</a>
我为该行添加了一个隐藏模板,并添加了一个名为“新行”的新按钮: <a class="newRow form-control" href="#">New row</a>
This following codes add the new row from template and move it to the next table on button click: 下面的代码从模板添加新行,然后单击按钮将其移至下一个表:
$(".newRow").click(function(e) {
e.preventDefault();
$(".template").clone(true, true).appendTo('#tblPurchaseOrders').show().removeClass("template");
});
$(".table").on("click", "#appendRow", function() {
$(this).closest("tr").detach().appendTo("#tbOrderDetail").find("td").last().remove();
});
The added CSS are only these: 添加的CSS只是这些:
.templatetbl {
display: none;
}
.template {
display: none;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.