使用 JS/jQuery 将行动态添加到表中时行消失

我正在尝试创建一个表，我可以在其中随意添加行。 有许多问题可以解决这个问题，但我找不到一个可以解决我遇到的问题。 行在创建后会立即消失，并且在检查时不会反映在 html 中 （f12）。 我看过这个问题，也看过这个问题，他们没有解决这个问题。 这是我的网页：

<form id="taskList" style="width:60%">
        <fieldset>
            <table id="taskTable" style="width:100%">
                <tr>
                    <th style="text-align:left">Task Number</th>
                    <th style="text-align:left"><abbr title="Total amount of time the task needs to run to finish execution.">Computation Time</abbr></th>
                    <th style="text-align:left"><abbr title="Does the task need exclusive use of the resource?">Resource Needed</abbr></th>
                    <th style="text-align:left"><abbr title="How often the task will repeat itself.  Acts as a deadline since it must complete before restarting.">Deadline/Period</abbr></th>
                    <th style="text-align:left"><abbr title="Any number representing a task's priority.  Higher numbers will be given precedence.">Priority</abbr></th>
                </tr>
                <tr>
                    <td>T1</td>
                    <td><input id="compTime_T1" value="5"/></td>
                    <td>
                        <select id="resNeeded_T1" name="res_T1">
                            <option value="yes">Yes</option>
                            <option value="no">No</option>
                        </select>
                    </td>
                    <td><input id="period_T1" value="20"/></td>
                    <td><input id="priority_T1" value="0"/></td>
                </tr>
            </table>
            <button id="addTaskButton">Add task...</button><br><br>
            <input type="button" id="submitTaskSet" value="Generate Schedule"/>
            <input type="button" id="resetTable" value="Clear Schedule"/>
        </fieldset>
    </form>

这是我拥有的原始 JavaScript（在尝试上述问题中建议的方法之前，效果甚至不太好）。

$('#addTaskButton').click(function () {addTaskToTable();});
$('#submitTaskSet').click(function () {generateSchedule();});
$('#resetTable').click(function () {resetTaskSet();});
//Variables
var taskTableRows = 1;
function addTaskToTable() {
    taskTableRows += 1;
    var taskNumStr = taskTableRows.toString();
    var table = document.getElementById("taskTable");
    var row = table.insertRow(taskTableRows);
    var cellTaskNum = row.insertCell(0);
    var cellCompTime = row.insertCell(1);
    var cellRes = row.insertCell(2);
    var cellPeriod = row.insertCell(3);
    var cellPrio = row.insertCell(4);
    cellTaskNum.innerHTML = "T" + taskNumStr;
    cellCompTime.innerHTML = "<input id='"compTime_T" + taskNumStr + "'" value='"5'"/>";
    cellRes.innerHTML = "<select id='"resNeeded_T" + taskNumStr + "'" name='"res_T" + 
        taskNumStr + "'">" + "<option value='"yes'">Yes</option>" +
        "<option value='"no'">No</option></select>";
    cellPeriod.innerHTML = "<input id='"period_T" + taskNumStr + "'" value='"20'"/>";
    cellPrio.innerHTML = "<input id='"priority_T" + taskNumStr + "'" value='"0'"/>";
} 

这是一个jsFiddle。（编辑：使用不同的方法，以免破坏JSFiddle）

我不知道这是否可能是特定于浏览器的问题，因为有时它似乎可以在IE11中工作，但在Firefox或Chrome中却从未工作过。 任何建议将不胜感激。