我有兩張桌子。當(dāng)用戶單擊“添加”按鈕時(shí)，該行將被添加到另一個(gè)表中。在另一個(gè)表中，當(dāng)用戶單擊“刪除”按鈕時(shí)，該行將被添加到前一個(gè)表中。我這部分工作正常。問(wèn)題是當(dāng)它們更改表時(shí)我需要更改行的按鈕。當(dāng)一行從“添加”表轉(zhuǎn)到“刪除”表時(shí)，按鈕需要從“添加”傳遞到“刪除”。這是一張圖片，以便您可以更好地理解：我的代碼是這樣的：$(document).ready(function(){ $(".agregar").on("click", function(event){ event.preventDefault(); var row = $(this).parents('tr'); //$(this).parents('tr').find('td:last-child').val(); $('#tablaSala').append(row); }); $(".borrar").on("click", function(event){ event.preventDefault(); var row = $(this).parents('tr'); $('#tablaDisponibles').append(row); });});在將行放在另一個(gè)表上之前，我需要編輯最后一個(gè)單元格。這將是按鈕的代碼//add button<button class="btn agregar"><span class="glyphicon glyphicon-plus"></span></button>//delete button<button class="btn borrar"><span class="glyphicon glyphicon-trash"></span></button>
1 回答
慕神8447489
TA貢獻(xiàn)1780條經(jīng)驗(yàn) 獲得超1個(gè)贊
有很多方法可以做到這一點(diǎn)。
一種方法是在所有行中都有兩個(gè)按鈕，并使用 CSS 隱藏其中一個(gè)或另一個(gè)。
例如：
.table_1 .borrar { display:none; }
.table_2 .agregar { display:none; }
根據(jù)信息的不同，您可能不希望人們打開(kāi)檢查器、顯示按鈕并單擊它。沒(méi)什么大不了的，但就像我說(shuō)的，這取決于你用它做什么。
如果您想對(duì)其進(jìn)行編碼，則必須在附加按鈕之前修改按鈕。
像這樣的東西
var row = $(this).closest('tr');
var button = row.find('.btn');
button.removeClass('agregar').addClass('borrar');
button.find('.glyphicon').removeClass('glyphicon-plus').addClass('glyphicon-trash');
但是等等，您原來(lái)的“點(diǎn)擊”事件仍在被觸發(fā)。為什么？因?yàn)榧词鼓粨Q了類，您也已為每個(gè)類附加了一個(gè)方法。
為了讓您的新按鈕正常工作，您需要附加這樣的方法
$("body").on("click", ".agregar", function(event){ ... }
$("body").on("click", ".borrar", function(event){ ... }
這將告訴代碼在每個(gè) .agregar 和 .borrar 元素事件上運(yùn)行（如果它們是新添加的）。
這是一個(gè)例子
$(document).ready(function() {
$("body").on("click", ".agregar", function(event) {
event.preventDefault();
var row = $(this).parents('tr');
var button = row.find('.btn');
button.removeClass('agregar').addClass('borrar');
button.find('.glyphicon').removeClass('glyphicon-plus').addClass('glyphicon-trash');
$('#tablaSala').append(row);
});
$("body").on("click", ".borrar", function(event) {
event.preventDefault();
var row = $(this).parents('tr');
var button = row.find('.btn');
button.removeClass('borrar').addClass('agregar');
button.find('.glyphicon').removeClass('glyphicon-trash').addClass('glyphicon-plus');
$('#tablaDisponibles').append(row);
});
});
table {
margin-bottom: 40px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tablaDisponibles" border="1">
<tr>
<td>Row 1</td>
<td><button class="btn agregar"><span class="glyphicon glyphicon-plus"></span></button></td>
</tr>
</table>
<table id="tablaSala" border="1">
<tr>
<td>Row 2</td>
<td><button class="btn borrar"><span class="glyphicon glyphicon-trash"></span></button></td>
</tr>
</table>
- 1 回答
- 0 關(guān)注
- 120 瀏覽
添加回答
舉報(bào)
0/150
提交
取消