[英]when the button is clicked i want the multiple selected checkbox row to be displayed from popup page to parent page
当选择表行时,我有一个表。我希望将特定行附加到另一个表中。
<table class="myTable" border="1">
<tr class="table">
<th class="table">
ID
</th>
<th class="table">
Name
</th>
<th class="table">
Price
</th>
</tr>
<tr class="table">
<td class="table">
1
</td>
<td class="table">
A
</td>
<td class="table">
1500
</td>
<td>
<input type="checkbox" name="">
</td>
</tr>
<tr class="table">
<td class="table">
2
</td>
<td class="table">
B
</td>
<td class="table">
3455
</td>
<td>
<input type="checkbox" name="">
</td>
</tr>
</table>
<table id="printTable" border="1">
<tr>
<td>ID</td>
<td>Name</td>
<td>Price</td>
</tr>
</table>
我有一个弹出页面,其中有一个带有多个复选框的表。当用户选择任何一个复选框并单击按钮时,必须将特定行从弹出页面保存到父页面
<script>
$("table tr").click(function() {
var items=[];
var tablerow = $(this).closest("tr").clone();
var tableData = $(this).children("td").map(function() {
return $(this).text();
}).get();
alert("Your data is: " + $.trim(tableData[0]) + " , " + $.trim(tableData[1]) + " , " + $.trim(tableData[2]));
$(tablerow).children("td:last").html(tableData);
items.push(tablerow);
alert(items);
tablerow.appendTo($("#printTable"));
});
</script>
无需映射所有数据,您只需克隆tr
并将其附加到其他表即可。 像这样:
<script>
$("table tr").click(function () {
// If you don't use a tbody, remove 'tbody' here
$("#printTable tbody").append($(this).clone());
});
</script>
编辑:使用循环,而不是重复
可能不是最佳答案,但这可以将值插入第二个表中,而与列排序无关。
https://jsfiddle.net/o4copkrz/2/
$("#input tr").click(function(){
var $this = $(this)
var arrIndex = ["id", "name", "price"]
var arrData = []
for (var i = 0; i < arrIndex.length; i++) {
arrData[arrIndex[i]] = $this.find("[data-" + arrIndex[i] + "]").text()
}
var $clone = $("#output thead tr").clone()
for (var i = 0; i < arrIndex.length; i++) {
$clone.find("[data-" + arrIndex[i] + "]").text(arrData[arrIndex[i]])
arrIndex[i]
};
$clone.appendTo($("#output tbody"))
})
<h3>First clone the row by clicking on row, then click on button to add to another table</h3>
<table id="firstTable">
<tr>
<th>id</th>
<th>Name</th>
<th>Price</th>
<th>Select</th>
</tr>
<tr class="row">
<td>1</td>
<td>Comp</td>
<td>2000</td>
<td class="removeIt"><input type="checkbox" name="rowSelect" class="selectCheck"/></td>
</tr>
<tr class="row">
<td>2</td>
<td>mouse</td>
<td>3000</td>
<td class="removeIt"><input type="checkbox" name="rowSelect" class="selectCheck"/></td>
</tr>
<tr>
</table>
<button id="appendToTable">Append to table</button>
<table id="printTable">
<tr>
<th>id</th>
<th>Name</th>
<th>Price</th>
</tr>
</table>
<div id="clonedData" style="display: none;"></div>
<script>
$(".selectCheck").click(function() {
if($(this).prop("checked") == true){
$("#clonedData").append($(this).parent().parent().clone());
$("#clonedData").find(".removeIt").remove();
}else{
var rowCheck = $(this).parent().parent().clone();
rowCheck.children(".removeIt").remove();
$('#clonedData tr').each(function(){
if(rowCheck.html()==$(this).html()){
$(this).remove();
}
});
}
});
$("#appendToTable").click(function() {
$("#printTable").append($("#clonedData").children().clone());
$("#clonedData").html('');
});
我还创建了一个小提琴https://jsfiddle.net/kgbet3et/11/ 。 请检查是否可以解决您的问题。
$('#myModal').modal('toggle'); $(document).on('change', 'input[type="checkbox"]', function(e){ if($(this).is(":checked")) { var row = $(this).closest('tr').html(); $('.table2 tbody').append('<tr>'+row+'</tr>'); } else { $('#row').find('input:checkbox[value="' + $(this).val() + '"]').closest('tr').remove(); } $('#row').on('click', ':checkbox', function (event) { $(this).closest('tr').remove(); }); });
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <body> <div class="col-md-6"> <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">× </button> <h4 class="modal-title"></h4> </div> <div class="modal-body"> <table class="table1 table table-bordered" id="echo"> <h3 style="text-align: center;"></h3> <tr> <td>1</td> <td name="echo">A</td> <td>1500</td> <td><input type="checkbox" value="1" class="check-box"></td> </tr> <tr> <td id="2">2</td> <td name="fetal_echo">B</td> <td>2000</td> <td><input type="checkbox" value="2" class="check-box"></td> </tr> <tr> <td id="1">3</td> <td value="abc">C</td> <td>8500</td> <td><input type="checkbox" value="3" class="check-box"></td> </tr> <p id="output"></p> </table> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal" id="closebtn">Close</button> </div> </div> </div> </div> <table class="table2 table table-bordered" id="row"> <tbody> </tbody> </table> <div>
@vijay mishra和@Vishnu Bhadoriya感谢您的支持。...您真的很棒。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.