让jquery tabledit插件处理多个表时遇到问题

Question

我一直在做一个小项目，在这个项目中，我在网页上为用户显示多个表。我希望用户能够编辑他们的表，并在数据库中更新数据。我正在使用jQuerytabledit插件来实现这一点。

我遵循了本教程的Live可编辑表，并成功地将其用于一个表。

我遇到的问题是，这似乎不适用于我所有的桌子。我只能点击第一个显示的表格，但我需要能够编辑所有表格。

我已经找过任何试图实现类似目标的人，但找不到太多。

<?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的第一个表。在类上更改它。如果你想一次应用你的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键保存新值