在HTML表格與jQuery使用onClick事件處理程序訪問數據

我正被一個foreach循環填充的表從數據庫中獲取數據：在HTML表格與jQuery使用onClick事件處理程序訪問數據

foreach ($retrieve_data as $retrieved_data) { 
    $content .= " 
    <tr id=\"id_$retrieved_data->id\"> 
     <td> $retrieved_data->id </td> 
     <td> $retrieved_data->posname </td> 
     <td> $retrieved_data->month </td> 
     <td> $retrieved_data->year </td> 
     <td> $retrieved_data->availableinv </td> 
     <td> $retrieved_data->maxinv </td> 
     <td> <button type=\"button\" id=\"editImpressionsBtn\" value=\"Edit\">Edit </button> 
    </tr>"; 
}

我想寫一個jQuery函數當點擊編輯按鈕時，從表中獲取數據，如id，availableinv和maxinv。

jQuery(document).on('click', 'editImpressionsBtn', function() {}

我怎麼能在這些列只有該行的分配本功能的數據變量的編輯按鈕被點擊？

來源

2016-10-14 Tommizzy

像這樣的東西？我注意到的一件事，你需要確保添加選擇器（。或＃爲類或ID）到處理程序。

$('.table_selector tbody').on('click', '.editImpressionsBtn', function(){ 
    row = $(this).closest('tr'); 

})

那麼你可以添加值或ID，並讓他們這樣

var my_id_value = row.attr('id')

來源

2016-10-14 14:27:53 rob

目標的TR，然後不同的TD的

$('#editImpressionsBtn').on('click', function() { 
    var tr = $(this).closest('tr'); 
    var tds = tr.find('td'); 

    var id = tds.eq(0).text(); 
    var avb = tds.eq(4).text(); 
});

如果你產生一個以上的表在服務器端，確保你沒有爲它們使用相同的ID，而是使用類。

來源

2016-10-14 14:29:13 adeneo

這個問題有三個部分。二是核心，你的問題，一個是編碼選項/改進：

第一：
當你的表是建在一個循環，我相信你有多個行。請注意，您不能使用具有相同ID的多個按鈕。這不僅在語義上不正確，而且會導致jQuery出現問題。因此，改變按鈕的id是一個類，而不是：

<button type="button" class="editImpressionsBtn" value="Edit">Edit </button>

二：現在
，在你的jQuery，你可以很輕鬆地訪問該行：

jQuery(document).on('click', 'button.editImpressionsBtn', function() { 
    var row = $(this).closest('tr'); 
    var id = row.find('td:eq(0)').text(); 
    var posname = row.find('td:eq(1)').text(); 
    // ... etc 
});

三：
引用裏面的轉義引號像你在做的那樣是一種代碼的痛苦，更難以維護和閱讀。我建議在這種情況下使用HEREDOC。

實施例：

$content .= <<<HTML 
    <tr id="id_$retrieved_data->id"> 
     <td> $retrieved_data->id </td> 
     <td> $retrieved_data->posname </td> 
     <td> $retrieved_data->month </td> 
     <td> $retrieved_data->year </td> 
     <td> $retrieved_data->availableinv </td> 
     <td> $retrieved_data->maxinv </td> 
     <td> <button type="button" class="editImpressionsBtn" value="Edit">Edit </button> 
    </tr>

HTML;

來源

2016-10-14 14:30:50

在HTML表格與jQuery使用onClick事件處理程序訪問數據

回答

相關問題