尝试在由引导程序的导航标签分隔的多个表中显示json内容。我选择通过FileReader上传文件（主要是由于不知道将json转换为js的任何其他方法）。最初，它工作正常（使用硬编码表），但是当我上传带有实际信息的json（并通过JS删除硬编码表）后，选项卡不再切换（信息仍然正确显示，但仅在第一个选项卡上显示）。
我没有任何控制台错误，我非常肯定这是一个JS问题，因为如果我将更新的（上传后）html从Chrome复制粘贴到vscode，它将再次正常工作。上载期间发生故障，导致Bootstrap的JS中断或停止执行，我无法弄清它是什么。
<div class="row mx-3">
<div class="col my-3">
<ul class="nav nav-tabs" id="lefttabs" role="tablist">
<li class="nav-item">
<a id="doc-tab" class="nav-link active" data-toggle="tab" href="#doc" role="tab" data-height="true" >gsdfgsfg</a>
</li>
<li class="nav-item">
<a id="stories-tab" class="nav-link" data-toggle="tab" href="#stories" role="tab" data-height="true" >htrhr</a>
</li>
</ul>
</div>
<div class="col my-3 d-flex justify-content-end">
<ul class="nav" id="righttabs">
<li class="nav-item">
<!-- <a class="nav-link" href="#"><input type="file" id="openfile" /></a> -->
<div class="input-group">
<div class="custom-file">
<input type="file" class="custom-file-input" id="file">
<label class="custom-file-label" for="file">Choose file</label>
</div>
</div>
</li>
</ul>
</div>
</div>
<div id="tablebody" class="tab-content my-2 mx-3">
<div class="tab-pane fade show active" id="doc" role="tabpanel">
<div class="d-inline-flex">
<table class="table table-hover table-hover-cells table-borderless mt-2 text-secondary">
<thead class="text-dark">
<tr>
<th scope="col"></th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
<th scope="col"><i class="fas fa-plus"></i></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>modal json (1 per project)</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">+</th>
</tr>
</tbody>
</table>
</div>
</div>
<div class="tab-pane fade" id="stories" role="tabpanel">
<div class="d-inline-flex">
<table class="table table-hover table-hover-cells table-borderless mt-2 text-secondary">
<thead>
<tr>
<th scope="col"></th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
<th scope="col"><i class="fas fa-plus"></i></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Хочу видеть..</td>
<td>Jersey</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Хочу иметь..</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Хочу понимать..</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">+</th>
</tr>
</tbody>
</table>
</div>
</div>
</div>
document.querySelector('#file').addEventListener('change', function() {
var ready = false;
var content = [];
var table = document.querySelectorAll('td');
var tabs = document.querySelector('#lefttabs');
var tablebody = document.querySelector('#tablebody');
var fr = new FileReader();
fr.readAsText(this.files[0]);
var check = function() {
if (ready === true) {
const schemas = content.data.tableSchemas;
while (tabs.firstChild) {
tabs.removeChild(tabs.firstChild);
}
while (tablebody.firstChild) {
tablebody.removeChild(tablebody.firstChild);
}
for (var i = 0; i < schemas.length; i++) {
var navitem = document.createElement('li');
navitem.className = 'nav-item';
var tabname = document.createElement('a');
tabname.setAttribute('id', schemas[i].id + '-tab');
tabname.className = 'nav-link' + (!i ? ' active' : '');
tabname.setAttribute('data-toggle', 'tab');
tabname.setAttribute('href', '#' + schemas[i].id);
tabname.setAttribute('role', 'tab');
tabname.setAttribute('data-height', 'true');
tabname.textContent = schemas[i].name;
navitem.appendChild(tabname);
tabs.appendChild(navitem);
var tab = document.createElement('div');
tab.setAttribute('id', schemas[i].id);
tab.className = 'tab-pane fade' + (!i ? ' show active' : '');
tab.setAttribute('role', 'tabpanel');
var flex = document.createElement('div');
flex.className = 'd-inline-flex';
var grid = document.createElement('table');
grid.className = 'table table-hover table-hover-cells';
grid.className += ' table-borderless mt-2 text-secondary';
grid.textContent = schemas[i].name;
flex.appendChild(grid);
tab.appendChild(flex);
tablebody.appendChild(tab);
}
return;
}
setTimeout(check, 1000);
}
check();
fr.onload = function() {
content = JSON.parse(this.result);
ready = true;
}
})
示例json：
{
"msg": "SUCCESS",
"data": {
"tableSchemas": [
{
"id": "111111111",
"name": "7676767676"
},
{
"id": "222222222222",
"name": "434343434343"
},
{
"id": "33333333333",
"name": "878787878"
},
{
"id": "44444444444",
"name": "21212121"
},
{
"id": "555555555",
"name": "989898989898"
},
{
"id": "666666666666",
"name": "0909090909"
},
{
"id": "777777777",
"name": "525252525"
},
{
"id": "888888888888",
"name": "74747474"
}
]
}
}
我希望它在上传json之后仍然能够切换选项卡，但是它什么也没做。
我正在使用Bootstrap-native。