如何在使用mindmup / editable-table更改表格时获取单元格名称和行id
如何在使用mindmup / editable-table更改表格时获取单元格名称和行id
提问于 2020-01-14 20:25:29
有一个数据库。需要一个机会来编辑它。我想用https://github.com/mindmup/editable-table实现这一点
当更改表时，发送一个请求：
$('#myTable td').on('change', function(evt, newValue) {
$.post( "script.php", { value: newValue })
.done(function( data ) {
alert( "Data Loaded: " + data );
});
;
});在这方面，问题是：
如何找出哪个单元格被更改了？
Stack Overflow用户
发布于 2020-05-31 13:00:36
我这样做的方法是给单元格一个data-row和data-col属性，例如
<table id="chart_data_table" class="table table-bordered">
<tbody>
<tr>
<td data-row="0" data-col="0">Category</td>
<td data-row="0" data-col="1">Dataset 1</td>
</tr>
<tr>
<td data-row="1" data-col="0">Category 1</td>
<td data-row="1" data-col="1" data-type="number">10</td>
</tr>
<tr>
<td data-row="2" data-col="0">Category 2</td>
<td data-row="2" data-col="1" data-type="number">8</td>
</tr>
</tbody>
</table>
然后，您可以通过以下方式获取单元格和行：
$(document).ready(function () {
////////////////////////////////////////////////
//Make the data table editable
// https://github.com/mindmup/editable-table
///////////////////////////////////////////////
$('#data_table').editableTableWidget();
$('#data_table td').on('change', function(evt, newValue) {
// get the row
console.log($(evt.currentTarget).data('row'))
// get the col
console.log($(evt.currentTarget).data('col'))
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/mindmup/editable-table/master/mindmup-editabletable.js"></script>
<table id="data_table" class="table table-bordered">
<tbody>
<tr>
<td data-row="0" data-col="0">Category</td>
<td data-row="0" data-col="1">Dataset 1</td>
</tr>
<tr>
<td data-row="1" data-col="0">Category 1</td>
<td data-row="1" data-col="1" >10</td>
</tr>
<tr>
<td data-row="2" data-col="0">Category 2</td>
<td data-row="2" data-col="1" >8</td>
</tr>
</tbody>
</table>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59733754
复制相关文章
相似问题
腾讯云开发者
