添加表格行而不刷新页面

Question

我正在尝试使用 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)