引导表上添加边框的数据 URL 选项

Question

在我的页面上，我有两个用引导表制作的表格。其中一个我手动将数据输入到行和列中，另一个填充data-toggle="table" data-url="working-url.php".它们都有类table-borderless，但是当生成带有数据URL的表时，类table-bordered似乎是自动添加的。正如预期的那样，另一个表没有边框。

有没有办法改变这种行为？

编辑： 这是我的源代码：

<table data-toggle="table"
data-url="working-url.php"
class="table table-borderless table-striped">
<thead>
<tr>
<th scope="col-2" data-field="statistic">Statistic</th>
<th scope="col-2" data-field="value">Value of Stat</th>
</tr>
</thead>
</table>

但是当我加载页面然后检查元素时，我得到这个：

<table data-toggle="table" 
data-url="working-url.php" 
class="table table-borderless table-striped table-bordered table-hover"> 
...
</table>

Answer 1

Her 是一种从通过引导 4 添加的数据中removeClass()的有效方法。

您可以使用JS或jQuery。

只需运行下面的代码片段即可查看其操作。您可以将以下 JS 或 jQuery 代码添加到表中，以手动删除您不需要的类。

另外，我还向您添加了一个名为my_table的ID，这是为了确保我们只从一个表中删除类table-bordered，而不是您页面上的每个表 - 如果有的话

//jQuery//
$('#my_table').removeClass('table-bordered')
//Javascript Version//
var element = document.getElementById("my_table");
element.classList.remove("table-bordered");

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<table data-toggle="table" data-url="working-url.php" class="table table-borderless table-striped table-bordered table-hover" id="my_table">
<thead>
<tr>
<th scope="col-2" data-field="statistic">Statistic</th>
<th scope="col-2" data-field="value">Value of Stat</th>
</tr>
</thead>
</table>

希望这有帮助。