Question

我正在尝试创建一个表格，我可以随意添加行。有很多问题可以解决这个问题，但我找不到解决我遇到的问题的问题。这些行在创建后立即消失，并且在检查时不会反映在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

添加e.preventDefault（）

$('#addTaskButton').click(function(e) {
    e.preventDefault();
    ........
    .....

Answer 2

您有一个表单内的按钮，其默认操作是提交表单，以便通过在单击处理程序中调用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

Answer 3

在功能结束时使用return false;，您的网页会重新加载。

Answer 4

实际上会发生的事情是，因为你在表单元素中使用了“button”，当你点击它时，它会导致表单提交。在你的情况下，你没有提供任何会导致表单的url整个页面要刷新。这就是为什么你要放弃添加的元素

您有两种方法可以解决此问题。选择其中一个选项

将按钮元素的类型更改为“按钮”。（默认类型为“提交”，这将导致您的表单提交）
在'addTaskButton'按钮的点击事件中使用e.preventDefault（）

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

4 个答案: