我正在努力让这个模式正常工作。我有一个简单的flask web应用程序，它有一个SQLite数据库和一些JavaScript代码，可以通过模式向表中添加新行。
到目前为止，编辑行在新页面中打开，效果良好。现在，我想在模式中编辑该行，并添加一个新行。我很难做到这一点，因为有一个ID要通过，我不知道如何在模态中处理它。
这是我的HTML文件：
{% extends "layout.html" %}
{% block content %}
<div class="sensors">
<div><h1> WIRED Sensors</h1> </div>
{{ table }}
<body>
<div class="content_container">
<table id="table">
<thead>
<td width=55px><b>Pin</b></td>
<td><b>Location</b></td>
<td width=175px><b>Last Signal</b></td>
<td><b>Target</b></td>
<td width=135px><b>Settings</b></td>
</thead>
{% for row in rows %}
<tr>
<td>{{row["ID"]}}</td>
<td>{{row["wired_location"]}}</td>
<td>{{row["wired_connection_state"]}}</td>
<td>{{row["wired_target"]}}</td>
<td>
<form onclick="return confirm('Do you really want to delete this sensor?')" action="{{url_for('wired_delete', id=row['ID'])}}" method="post">
<input type="hidden" name="_method" value="DELETE">
<input type="submit" value="" class="button_delete">
</form>
<form action="{{url_for('wired_edit', id=row['ID'])}}" method="post">
<input type="hidden" name="_method" value="EDIT">
<input type="submit" value="" class="modal-button button_edit" href="#editmodal">
</form>
</td>
</tr>
{% endfor %}
</table>
<br>
<a href="/wired_sensors" class="button_refresh" ></a>
<button class="modal-button button_add" href="#addmodal">Add Sensor</button>
<a href="wired_service_restart" class="button_grey" >Restart Service</a>
</div>
</div>
<!-- The Modal -->
<div id="addmodal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Add New Sensor</h2>
</div>
<div class="modal-body">
<form action = "{{ url_for('wired_addrec') }}" method = "POST">
<br>
Pin<br>
<input class="inputfileid" type = "number" name = "ID" min="1" max="30" /></br>
Location*<br>
<input class="inputfile" type = "text" name = "wired_location" required /><br>
Target <div class="tooltip"><img class="infoicon" src="/static/icons/info-circle_blue.svg">
<span class="tooltiptext"><iframe src="{{ url_for('targetinfo') }}">
<p>Your browser does not support iframes.</p>
</iframe></span>
</div> <br>
<input class="inputfile" placeholder="z.B.: -h 192.168.1.1 -j sequenz" type = "text" name = "wired_target" /><br>
<br>
<input type = "submit" value = "Add Sensor" class="button_grey"/><br>
</form>
<br>
<br>
</div>
</div>
</div>
<!-- The Modal -->
<div id="editmodal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Edit sensor</h2>
</div>
<div class="modal-body">
<form action = "{{ url_for('wired_editrec') }}" method = "POST">
<h2>Edit Sensor</h2>
Pin<br>
<input class="inputfileid" type = "number" name = "ID" value = "{{id}}" readonly/></br>
Location*<br>
<input class="inputfile" type = "text" name = "wired_location" value = "{{new_wired_location}}" required /><br>
Target <div class="tooltip"><img class="infoicon" src="/static/icons/info-circle_blue.svg">
<span class="tooltiptext"><iframe src="{{ url_for('targetinfo') }}">
<p>Your browser does not support iframes.</p>
</iframe></span>
</div> <br>
<input class="inputfile" type = "text" name = "wired_target" value = "{{new_wired_target}}" /><br>
<br>
<button class="button_grey" onclick="window.location.href='/wired_sensors'">Cancel</button>
<input type = "submit" value = "Save" class="button_add"/>
</form>
<br>
<br>
</div>
</div>
</div>
{% endblock %}
这是模态JavaScript代码：
// Get the button that opens the modal
var btn = document.querySelectorAll(".modal-button");
// All page modals
var modals = document.querySelectorAll('.modal');
// Get the <span> element that closes the modal
var spans = document.getElementsByClassName("close");
// When the user clicks the button, open the modal
for (var i = 0; i < btn.length; i++) {
btn[i].onclick = function(e) {
console.log (this.btn);
e.preventDefault();
modal = document.querySelector(e.target.getAttribute("href"));
modal.style.display = "block";
}
}
// When the user clicks on <span> (x), close the modal
for (var i = 0; i < spans.length; i++) {
spans[i].onclick = function() {
for (var index in modals) {
if (typeof modals[index].style !== 'undefined') modals[index].style.display = "none";
}
}
}
我建议使用bootstrap，因为它可以更容易地编程模式。请参阅下面的链接：Bootstrap 4 Modals