javascript - 添加表格行而不刷新页面
问题描述
我正在尝试使用 java 脚本动态添加行。单击按钮时,我可以简要地看到该行,然后页面刷新并且表格消失了。索引页面上有一个下拉菜单。当用户选择一个选项并单击按钮时,它应该根据所选选项在表中插入一行。
HTML 代码:
<div class = "tableDiv">
<table id=initiativeTable>
<thead>
<th>Character</th>
<th>Initiative</th>
<th>Condition</th>
</thead>
<tbody>
</tbody>
</table>
</div>
<div class = "myDiv">
<form class = "myform" method="POST">
<label for="combatants">Select a combatant:</label>
<select id="combatants" name="combatants">
<option selected>None</option>
{% for key in characters %}
<option>{{key.name}}, {{key.modifier}}.</option>
{% endfor %}
</select>
<div class="form-group">
<button class="btn btn-primary" name = "combatantButton" onclick = "addRow();" type="submit">Add Combatant</button>
</div>
<div class="form-group">
<button class="btn btn-primary" name = "roll_initiative" type="submit">Roll Initative</button>
</div>
</form>
<form class = "myform" action="/updateCharacter" method="POST">
<div class="form_group"><p>Add and remove players from the database:</p></div>
<div class="form-group">
<button class="btn btn-primary" name = "update_characters" onclick="location.href = 'updateCharacter.html';">Update Character Database</button>
</div>
</form>
</div>
Java脚本:
<script>
var intModifier;
var round = 1;
var turn = 0
//add rows to table when button is clicked
function addRow() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
var initiativeTable = document.getElementById('initiativeTable');
var rowCount = initiativeTable.rows.length;
var tr = initiativeTable.insertRow(rowCount);
tr = initiativeTable.insertRow(rowCount);
var characterSelection = document.getElementById('combatants')
characterAdded = characterSelection[0];
intModifier = characterSelection[1];
add cells to the row
var td = document.createElement('td');
td = tr.insertCell(0);
td.innerHTML = characterAdded;
td = tr.insertCell(1);
td.innerHTML = intModifier;
td = tr.insertCell(2);
td.innerHTML = "CharacterCondition";
initiativeTable.appendChild(tr);
}
xhttp.open("GET", "index.html", true);
xhttp.send(characterAddedd & intModifier);
}
</script>
Python代码:
@app.route("/", methods = ["GET", "POST"])
@login_required
def index():
db = sqlite3.connect("combat.db")
cur = db.cursor()
GM = session['user_id']
cur.execute("SELECT name, initiative FROM characters WHERE GM_id = ?", (GM,))
results = cur.fetchall()
list(results)
characters = []
i = 0
for row in results:
characters.append({"name": results[i][0], "modifier": results[i][1]})
i += 1
return render_template("index.html", characters=characters)
解决方案
推荐阅读
- php - Slim 框架中的 Access-Control-Origin
- oauth - 在 PostMan 中无法在 JMeter 中生成身份验证令牌,它工作正常
- javascript - Visual Studio 2017 调试器在 Office Excel 加载项 Typescript 转换后无法正常工作
- aspnetboilerplate - ABP 后台作业在负载均衡下多次运行
- php - ACF:无法从 Post 循环中的关系字段 Post 对象获取标题
- typescript - 编辑后获取更新数据并重定向到另一条路线
- python - 如何从 IDLE 中的 .py 文件单独运行 Python 脚本的选择性部分
- php - 选择查询在同一页面上第二次不起作用
- javascript - 创建选择框或下拉菜单的建议
- c - 如何在不保存其值的情况下重新启动程序(C)