jQuery迭代/循環通過點擊按鈕上的數據表

我有一個從數據庫呈現結果的表。東陽結果是一個「矩陣」，標記將給予jQuery迭代/循環通過點擊按鈕上的數據表

<table> 
<thead> 
</thead> 
    <tbody> 
     <td>some datas inside TDs</td> 
     <td>Last TD<button class = 'btn-action-edit'></button></td> 
    </tbody> 
    <tbody> 
     <td>some datas inside TDs</td> 
     <td>Last TD<button class = 'btn-action-edit'></button></td> 
    </tbody> 
    <tbody> 
     <td>some datas inside TDs</td> 
     <td>Last TD<button class = 'btn-action-edit'></button></td> 
    </tbody> 
<tfooter> 
</tfooter> 
</table>

對於每一行的表內，我有按鈕，其允許一些動作（即「編輯」 /「發佈」 /等）。當點擊一個按鈕時，我希望它做一些動作。爲了實現這個目標，我做了以下內容：

$('tbody:nth-child(2) .btn-action-edit').on('click', function() { 
    $('tbody:nth-child(2) .detail-edit').toggleClass('open'); 
}); 
$('tbody:nth-child(2) .close-edit').on('click', function() { 
    $('tbody:nth-child(2) .detail-edit').toggleClass('open'); 
}); 

$('tbody:nth-child(3) .btn-action-edit').on('click', function() { 
    $('tbody:nth-child(3) .detail-edit').toggleClass('open'); 
}); 
$('tbody:nth-child(3) .close-edit').on('click', function() { 
    $('tbody:nth-child(3) .detail-edit').toggleClass('open'); 
});

但假設我得到我的DB或1000+ 50+項，這將是一場噩夢做的工作

我嘗試了一些：

$('table > tbody td:last-child').each(function (index) { 
    $(this).find('.btn-action-edit').on('click', function(e) { 
      e.preventDefault(); 
      $('.detail-edit').toggleClass('open'); 
    }); 
});

但它不工作！

對此問題的任何建議;我錯過了關於循環和/或DOM的東西！

謝謝

來源

2016-09-16 Horacio

這樣的事情應該工作。

$(".btn-action-edit").on("click", function() { 
    $(this).closest("tbody").find(".detail-edit").toggleClass("open"); 
});

更新：

當您加載通過Ajax的內容，你可以建立一個一般的事件監聽器是這樣的：

$(document).on("click", ".btn-action-edit", function() { 
    $(this).closest("tbody").find(".detail-edit").toggleClass("open"); 
});

這將然後拿起是否物品在加載頁面時或者稍後使用Ajax進行拖動時在頁面上。

來源

2016-09-16 23:39:19

它的工作確實... 和比我與掙扎simplier！大。謝謝。 – Horacio

如果您的所有結果都是由服務器呈現的，而您只是添加它，那麼爲什麼不只是將eventListener添加到類中並使用它們相對於事件目標呢？

$('button.btn-action-edit').on('click', function() { 
    $(this).closest('tbody').find('.detail-edit').toggleClass('open'); 
}); 

$('button.close-edit').on('click', function() { 
    $(this).closest('tbody').find('.detail-edit').toggleClass('open'); 
});

如果您使用ajax加載元素，則必須將偵聽器添加到添加的內容中。但許多事件監聽器的都不好，我推薦你使用該按鈕onclick屬性：

<button class="btn-action-edit" onclick="itemEdit(this);"> ... </button> 
<button class="close-edit" onclick="closeItemEdit(this);"> ... </button> 

<script> 
function itemEdit(element) 
{ 
    $(this).closest('tbody').find('.detail-edit').toggleClass('open'); 
} 

function closeItemEdit(element) 
{ 
    $(this).closest('tbody').find('.detail-edit').toggleClass('open'); 
} 
</script>

來源

2016-09-16 23:42:03 adaliszk

是的元素加載與Ajax和我想到一個「addEventListener」，但無法找到如何。我會嘗試你的解決方案。謝謝。 – Horacio

.on函數使用HTMLElement.addEventListener，它們幾乎是相同的東西，jQuery只是省略一些助手，例如可以移除事件監聽器的.off方法。 – adaliszk

這就是我在選擇jQuery而不是「經典」javascript之前首先想到的。因爲起初我開始寫一個「簡單」的循環函數，但未能實現我的目標。所以我可能錯過了一些。然而，這很好知道。 – Horacio

jQuery迭代/循環通過點擊按鈕上的數據表

回答

相關問題