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

Question

我正在尝试创建一个可以随意添加行的表。有很多问题可以解决这个问题，但我找不到一个可以解决我遇到的问题的问题。这些行在创建后立即消失，并且在检查时不会反射(reflect)在 html 中 (f12)。我看过this question还有this popular one他们没有解决这个问题。这是我的 html:

<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 中却无效。任何建议将不胜感激。

Answer 1

表单内有该按钮，其默认操作是提交表单，因此可以通过调用 event.preventDefault() 来阻止它。在点击处理程序中

$('#addTaskButton').click(function(e) {
    e.preventDefault()
    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);
    var newRow = "<tr><td>T" + taskNumStr + "</td>" + 
        "<td><input id=\"compTime_T" + taskNumStr + "\" value=\"5\"/></td>" +
        "<td><select id=\"resNeeded_T" + taskNumStr + "\" name=\"res_T" + taskNumStr + "\">" + 
        "<option value=\"yes\">Yes</option>" +
        "<option value=\"no\">No</option></select></td>" +
        "<td><input id=\"period_T" + taskNumStr + "\" value=\"20\"/></td>" +
        "<td><input id=\"priority_T" + taskNumStr + "\" value=\"0\"/></td></tr>";
    $('#taskTable tr:last').after(newRow);
});

演示:Fiddle