我正在尝试在表格的每一行的末尾插入一个按钮，该按钮将显示css div，该按钮具有文本区域输入字段，用于记录与表格中每个索引相关的注释。我已经设法用普通的html表以及该引导表下的该表创建此功能，但是当我尝试在引导表内插入链接或按钮时，HTML被解释为纯文本。我只会使用已经可以使用的html表，但是我们的最终用户希望能够搜索各个列。我在Flask应用程序中使用一个宁静的API连接到数据库，并且正确地提取了数据。我已经测试了我的CRUD操作是否可以提交评论，并且效果很好。我将在下面发布我的代码，并包括一个jsfiddle链接。任何建议或帮助将不胜感激，谢谢
{% extends "base.html" %}
{% block content %}
<link rel="stylesheet" href="../static/css/normalize.min.css">
<link rel="stylesheet" href="../static/css/bootstrap.min.css">
<link rel="stylesheet" href="../static/css/bootstrap-table.min.css">
<link rel="stylesheet" href="../static/css/bootstrap-editable.css">
<header class="header-fixed">
<div class="header-limiter">
<img style="height:50px;" src="./static/css/img/cap_logo2.png">
<nav>
<a href="./email">Email</a> | <a href="./logout">Logout</a>
</nav>
</div>
</header>
<div>
{% with messages = get_flashed_messages() %}
{% if messages %}
{% for message in messages %}
<div class="alert alert-danger">{{message}}</div>
{% endfor %}
{% endif %}
{% endwith %}
</div>
<link rel="stylesheet" type="text/css" href="./static/css/comment_style">
</head>
<body>
<section class="large-cta-section">
<div class="medium-large-wrapper">
<div class="medium-text-wrapper">
<div class="second">
<div class="box">
<h2 class="h2 large white">
<div class="container">
<div id="toolbar">
</div>
<table id="table" data-toggle="table" data-search="true" data-filter-control="true" data-show-export="true" data-click-to-select="true" data-toolbar="#toolbar" class="table-responsive">
<thead>
<tr>
<th data-field="year" data-filter-control="input" data-sortable="true">Year</th>
<th data-field="month" data-filter-control="input" data-sortable="true">Month</th>
<th data-field="bank_type" data-filter-control="input" data-sortable="true">Bank Type</th>
<th data-field="fraud_type" data-filter-control="input" data-sortable="true">Fraud Type</th>
<th data-field="net_actuals" data-filter-control="input" data-sortable="true">Net Actuals</th>
<th data-field="budget" data-filter-control="input" data-sortable="true">Actual Budget</th>
<th data-field="ol_variance" data-filter-control="input" data-sortable="true">OL Variance</th>
<th>Comment</th>
</tr>
</thead>
<tbody>
{%for item in comments%}
<tr>
<form action="/comments", method="POST">
<input type="hidden" name='idv' value='{{item.id}}'>
<td>{{item.year}}</td>
<td>{{item.month}}</td>
<td>{{item.bank_type}}</td>
<td>{{item.fraud_type}}</td>
<td>{{item.net_actuals}}</td>
<td>{{item.budget}}</td>
<td>{{item.ol_variance}}</td>
<td></td>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Here i am</h2>
<a class="close" href="#">×</a>
<div class="content">
<textarea rows="2" cols="40" wrap="hard" name="cmt_box" value='{{item.blurb}}'></textarea>
<button type="submit" class="btn btn-warning">Submit</button>
</div>
</div>
</div>
</form>
</tr>
{%endfor%}
</tbody>
</table>
</div>
<hr>
<table id="example" class="flat-table flat-table-1" style="display: inline-block;">
<thead class="thead-dark">
<tr>
<th>Year</th>
<th>Month</th>
<th>Bank Type</th>
<th>Fraud Type</th>
<th>Net Actuals</th>
<th>Actual Budget</th>
<th>OL Variance</th>
<th>Comment</th>
</tr>
</thead>
<tbody>
{%for item in comments%}
<tr>
<form action="/comments", method="POST">
<input type="hidden" name='idv' value='{{item.id}}'>
<td>{{item.year}}</td>
<td>{{item.month}}</td>
<td>{{item.bank_type}}</td>
<td>{{item.fraud_type}}</td>
<td>{{item.net_actuals}}</td>
<td>{{item.budget}}</td>
<td>{{item.ol_variance}}</td>
<td><a class="button" href="#popup1">Add Comment</a></td>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Here i am</h2>
<a class="close" href="#">×</a>
<div class="content">
<textarea rows="2" cols="40" wrap="hard" name="cmt_box" value='{{item.blurb}}'></textarea>
<button type="submit" class="btn btn-warning">Submit</button>
</div>
</div>
</div>
</form>
</tr>
{%endfor%}
</tbody>
</table>
</h2>
</div>
<div id="ShowMeDIV" style="display: none;">
</div>
</div>
</div>
</div>
</section>
<section class="contact-wrap">
</section>
<script type="text/javascript">
var $table = $('#table');
$(function () {
$('#toolbar').find('select').change(function () {
$table.bootstrapTable('refreshOptions', {
exportDataType: $(this).val()
});
});
})
var trBoldBlue = $("table");
$(trBoldBlue).on("click", "tr", function (){
$(this).toggleClass("bold-blue");
});
function myFunction() {
var x = document.getElementById('popup');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
</script>
<script src="{{url_for('static', filename='js/comments.js')}}"></script>
{% endblock %}