無法讓 jquery tabledit 插件在多個表上工作

Question

我一直在做一個小項目，我在 web 頁面上為用戶顯示多個表。 我希望用戶能夠編輯他們的表格並在數據庫中更新該數據。 我正在使用 jQuery tabledit 插件來實現這一點。

我遵循了本教程Live editable tables並且能夠成功地讓它適用於一個表。

我遇到的問題是這似乎不適用於我的所有桌子。 我只能單擊第一個顯示的表格，但我需要能夠編輯所有表格。

我一直在尋找任何試圖實現類似目標但找不到太多東西的人。

<?php

// ...

if ($resultCheck > 0) {
    while ($row = mysqli_fetch_assoc($result)) {

?>
<table id="data_table">
    <thead>
        <tr>
            <th>col1</th>
            <th>col2</th>
            <th>col3</th>
            <th>col4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><?php echo $row ['col1_data']; ?></td>
            <td><?php echo $row ['col2_data']; ?></td>
            <td><?php echo $row ['col3_data']; ?></td>
            <td><?php echo $row ['col4_data']; ?></td>
        </tr>
    </tbody>
</table>
<?php 

    }
}

$(document).ready(function () {
  $('#data_table').Tabledit({
    deleteButton: false,
    editButton: false,
    columns: {
      identifier: [ 0, 'col1_data' ],
      editable: [ [ 1, 'col2_data' ], [ 2, 'col3_data' ], [ 3, 'col4_data' ] ],
    },
    hideIdentifier: false,
    url: 'includes/liveedit.inc.php',
  })
})

我認為這可能是每個表具有相同標識符的問題，但我不確定。 我從數據庫中返回每個帶有唯一標識符的表，但我不確定如何將其與插件一起使用（似乎我需要這樣做）。

抱歉，如果這有一個簡單的解決方案。 我對 php 和 jQuery 還是很陌生。

提前感謝您的幫助，如果我不夠清楚，請告訴我！

Answer 1

你有一個id並且它必須是唯一的。 您的 while 語句創建了許多具有相同 id 的表。

你的 JS 總是去第一個有這樣 id 的表。 在class上更改它。 如果您想立即應用 JS 代碼，請不要使用 id。

 $(document).ready(function() { $('.data_table').Tabledit({ deleteButton: false, editButton: false, columns: { identifier: [0, 'col1_data'], editable: [[1, 'col2_data'], [2, 'col3_data'], [3, 'col4_data']] }, hideIdentifier: false, url: 'includes/liveedit.inc.php' }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery-tabledit@1.0.0/jquery.tabledit.min.js"></script> <table class="data_table"> <thead> <tr> <th>col1</th> <th>col2</th> <th>col3</th> <th>col4</th> </tr> </thead> <tbody> <tr> <td>rew</td> <td>ter</td> <td>yrt</td> <td>qwe</td> </tr> </tbody> </table> <table class="data_table"> <thead> <tr> <th>col1</th> <th>col2</th> <th>col3</th> <th>col4</th> </tr> </thead> <tbody> <tr> <td>data_column1</td> <td>dat2a_column1</td> <td>da3ta_column1</td> <td>data_co5lumn1</td> </tr> </tbody> </table>

在代碼段中按 ENTER 以保存新值