正如标题所暗示的那样。
这是我的代码
这是保留的jquery：
function reserve() {
var rows = $('#tbodyMainTable tr');
copyTable = $('#view2 tbody');
rows.click(function () {
var row = $(this).closest('tr').clone();
cloneRow = row.clone();
cloneRow.children('td:last-child').html('<input type="submit" value="Delete" style="font-size: 12px; width: 100px;" class="delete">');
copyTable.append(cloneRow);
row.prevAll().hide();
});
copyTable.on('click', '.delete', function (e) {
e.preventDefault();
$(this).closest('tr').remove();
})
}
克隆代码
function loadSched() {
trial();
var originID = $('#cboOrigin option:selected').val();
var desID = $('#cboDestination option:selected').val();
$.ajax({
type: "POST",
url: pageUrl + "/loadSched",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
var cells = eval("(" + response.d + ")");
$('#tbodyMainTable').empty();
for (var i = 0; i < cells.length; i++) {
var d = $('#txtDatePicker').val();
var c = cells[i].shortDate
if (d == c && originID == cells[i].OriginDesc && desID == cells[i].DestinationDesc) {
$('#tbodyMainTable').append('<tr>'
+ '<td>' + cells[i].FerryNameDesc + '</td>'
+ '<td>' + cells[i].AccomodationDesc + '</td>'
+ '<td>' + cells[i].ETDDesc + '</td>'
+ '<td>' + cells[i].ETADesc + '</td>'
+ '<td>' + cells[i].TripDesc + '</td>'
+ '<td>' + cells[i].FareDesc + '</td>'
+ '<td><input type="button" value="Book Ticket" style="font-size: 12px; width: 100px;" onclick="reserve();" /></td>'
+ '</tr>');
}
}
},
error: function (err) {
console.log(err);
},
complete: function () {
}
});
};
HTML代码
<div class="input-control text" data-role="input" style="width:300px">
<button class="button"><span class="mif-paper-plane place-right"></span></button>
<span>
<select id="cboDestination" class="cboDestination"></select>
</span>
</div>
<div style="width:300px" class="input-control text" data-role="datepicker" id="datepicker" data-date="1972-12-21" data-format="dd/mm/yyyy">
<input type="text" id="txtDatePicker" placeholder="Select date..." onchange="loadSched();">
<button class="button"><span class="mif-calendar" id="txtDatePicker"></span></button>
</div>
<div id="tblhide" >
<h2> Available Trips</h2>
<div class="flex-grid demo-grid">
<div class="row">
<table class="table hovered cell-hovered border bordered">
<thead>
<tr>
<th class="sortable-column fg-white bg-lighterBlue">Ferry Name</th>
<th class="sortable-column fg-white bg-lighterBlue">Accomodation</th>
<th class="sortable-column fg-white bg-lighterBlue">Time of Departure</th>
<th class="sortable-column fg-white bg-lighterBlue">Time of Arrival</th>
<th class="sortable-column fg-white bg-lighterBlue">Trip</th>
<th class="sortable-column fg-white bg-lighterBlue">Fare</th>
<th class="sortable-column fg-white bg-lighterBlue">Book Ticket?</th>
</tr>
</thead>
<tbody style="color:black" id="tbodyMainTable" class="tbodyMainTable" onload="trial();"></tbody>
</table>
</div>
</div>
<h2> Your selected Trips</h2>
<div class="flex-grid demo-grid">
<div class="row">
<table class="table hovered cell-hovered border bordered" id="view2">
<thead>
<tr>
<th class="sortable-column fg-white bg-lighterBlue">Ferry Name</th>
<th class="sortable-column fg-white bg-lighterBlue">Accomodation</th>
<th class="sortable-column fg-white bg-lighterBlue">Time of Departure</th>
<th class="sortable-column fg-white bg-lighterBlue">Time of Arrival</th>
<th class="sortable-column fg-white bg-lighterBlue">Trip</th>
<th class="sortable-column fg-white bg-lighterBlue">Fare</th>
<th class="sortable-column fg-white bg-lighterBlue">Remove</th>
</tr>
</thead>
<tbody style="color:black" id="view2"></tbody>
</table>
</div>
</div>
我想在另一个表上查看结果，这是tbody视图2.问题是，一旦我点击按钮本身，它总是克隆。它倍增我现在点击这本书的时间！请帮助并建议谢谢！
UPDATE！为了正确的语法，当我点击预订票时，它会调用该预留的命令，但是一旦我再次点击预订票，它就会有2个克隆，而在另一个表中则为3行而不是2行。是否有任何方式该命令只能运行一次，以便它只会确认单击单个副本而不是单击副本然后如果再次单击加倍？谢谢。
答案 0 :(得分：0)
//click event for tr, who does not have 'cloned' as its class
$(document).on('click', '#tbl1 tbody tr:not(.cloned)', function() {
//clone this row
var tr = $(this).clone();
//find the index
var indx = $(this).index();
//add the index as attribute to the cloned row
tr.attr('index', indx);
//add a class cloned, so that we can trigger the click event
//for all tr's who dont have this class
$(this).addClass('cloned');
tr.append('<td><input class="delRow" type="submit" value="delete" /><td>');
$('#tbl2 tbody').append(tr);
});
//delete btn click event
$(document).on('click', '.delRow', function() {
//find the index attribute
var index = $(this).closest('tr').attr('index');
//remove this row
$(this).closest('tr').remove();
//remove class 'cloned' so as to reenable the click event
$('#tbl1 tbody').find('tr').eq(index).removeClass('cloned');
});table {
border: 1px solid black;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tbl1">
<tbody>
<tr>
<td>A</td>
</tr>
<tr>
<td>B</td>
</tr>
<tr>
<td>C</td>
</tr>
<tr>
<td>D</td>
</tr>
<tr>
<td>E</td>
</tr>
</tbody>
</table>
<br /><br />
<table id="tbl2">
<tbody>
</tbody>
</table>
在你的情况下：
在rows.click(function () {内部事件中，您需要找到索引
var indx = $(this).closest('tr').index()
将其as属性添加到克隆的row
row.attr('index', indx);
然后，将一些类（这里我使用克隆）添加到单击的行
$(this).closest('tr').addClass('cloned');
现在copyTable.on('click', '.delete', function (e) {
找到索引属性：
var index = $(this).closest('tr').attr('index');
删除克隆的行，
然后删除添加的类，如
$('#tbodyMainTable tbody').find('tr').eq(index).removeClass('cloned');
代码段应该如下所示：
<input type="button" value="Book Ticket" style="font-size: 12px; width: 100px;" onclick="return reserve(this);" />
function reserve(elem) {
var rows = $('#tbodyMainTable tr'),
copyTable = $('#view2 tbody');
var indx = $(elem).closest('tr').index()
var row = $(elem).closest('tr').clone();
row.attr('index', indx);
var cloneRow = row.clone();
$(elem).closest('tr').addClass('cloned');
cloneRow.children('td:last-child').html('<input type="submit" value="Delete" style="font-size: 12px; width: 100px;" class="delete">');
copyTable.append(cloneRow);
row.prevAll().hide();
return false;
}
<input type="submit" value="Delete" style="font-size: 12px; width: 100px;" onclick="return delete(this);">
function delete(elem) {
var index = $(elem).closest('tr').attr('index');
$(elem).closest('tr').remove();
$('#tbodyMainTable tbody').find('tr').eq(index).removeClass('cloned');
return false;
})
答案 1 :(得分：0)
function reserve() {
var rows = $('#tbodyMainTable tr'),
copyTable = $('#view2 tbody');
rows.click(function () {
var indx = $(this).closest('tr').index()
var row = $(this).closest('tr').clone();
row.attr('index', indx);
cloneRow = row.clone();
$(this).closest('tr').addClass('cloned');
cloneRow.children('td:last-child').html('<input type="submit" value="Delete" style="font-size: 12px; width: 100px;" class="delete">');
copyTable.append(cloneRow);
row.prevAll().hide();
});
copyTable.on('click', '.delete', function (e) {
e.preventDefault();
var index = $(this).closest('tr').attr('index');
$(this).closest('tr').remove();
$('#tbodyMainTable tbody').find('tr').eq(index).removeClass('cloned');
})
}