Я пытаюсь использовать Bootstrap 3 и jquery для загрузки редактируемой таблицы в HTML, но по какой-то причине у меня постоянно появляется ошибка типа Uncaught, хотя я загружаю все модули, и у меня нет проблем с запуском файла в jsfiddleно не здесь.http://jsfiddle.net/6o3c9e4p/1/
index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<table class="table table-striped table-bordered table-hover" cellspacing="0" id="mainTable" data-click-to-select="true" data-show-toggle="true" data-show-columns="true" data-search="true" data-pagination="true">
<thead>
<tr>
<th data-field="storeName" data-halign="center" data-align="left" data-sortable="true">Store Name</th>
<th data-field="sales" data-halign="center" data-align="left" data-sortable="true" data-editable="true">Sales</th>
</tr>
</thead>
</table>
<script src="script.js" type="text/javascript"></script>
</body>
</html>
script.js - Javascript+ jQuery 2.1.0
$.fn.editable.defaults.mode = 'inline';
$.fn.editable.defaults.container = 'body';
var data = [{storeName: 'A', sales: 'na'},
{storeName: 'B', sales: 'na'},
{storeName: 'C', sales: 'na'},
{storeName: 'D', sales: 'na'}
]
$('table').bootstrapTable({
data: data,
sortable: true,
resizable: true,
editable: true
});
$('.editable').click(function(){
if($(this).next('.editable-container').width() > $(this).closest('td').width()){
$('th:eq('+$(this).closest('td').index()+')').css('width', $(this).next('.editable-container').width()+15);
}
});
$('.editable').on('hidden', function() {
$('th:eq('+$(this).closest('td').index()+')').css('width', 'auto');
});