I'm trying to create a table where I am able to add rows at will. There are a number of questions that address this, but I can't find one that addresses the problem I am experiencing. The rows disappear immediately after they are created and aren't reflected in the html upon inspection (f12). I've looked at this question and also this popular one and they don't fix this issue. Here is my 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 plete 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="pTime_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>

And here is the original javascript I had (before trying the way as suggested in the question mentioned above, that worked even less well).

$('#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=\"pTime_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\"/>";
} 

Here is a jsFiddle. (Edit: Uses a different method so as to not break JSFiddle)

I don't know if this could be a browser-specific problem, as sometimes it seems to work in IE11 but never in Firefox or Chrome. Any suggestions would be greatly appreciated.

I'm trying to create a table where I am able to add rows at will. There are a number of questions that address this, but I can't find one that addresses the problem I am experiencing. The rows disappear immediately after they are created and aren't reflected in the html upon inspection (f12). I've looked at this question and also this popular one and they don't fix this issue. Here is my 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 plete 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="pTime_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>

And here is the original javascript I had (before trying the way as suggested in the question mentioned above, that worked even less well).

$('#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=\"pTime_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\"/>";
} 

Here is a jsFiddle. (Edit: Uses a different method so as to not break JSFiddle)

I don't know if this could be a browser-specific problem, as sometimes it seems to work in IE11 but never in Firefox or Chrome. Any suggestions would be greatly appreciated.

• javascript
• jquery
• html

Share Follow edited May 23, 2017 at 11:53 CommunityBot 111 silver badge asked Dec 10, 2014 at 3:32 thyeggmanthyeggman 2311 silver badge33 bronze badges 1

• haven't you noticed your page refreshing? ... it's from the form submitting – charlietfl Commented Dec 10, 2014 at 3:36

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

You have the button inside a form, whose default action is to submit the form so prevent it by calling event.preventDefault() in the click handler

$('#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=\"pTime_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);
});

Demo: Fiddle

add e.preventDefault()

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

Actually what happens is that since you have used "button" inside a form element and when you click on it, it will cause the form to submit.In your case you haven't provided any url to the form that will cause the whole page to refresh. Thats why you are loosing the added element

Well you have two ways to fix this issue. choose either of these options

1. Change the type of button element to "button".(The default type is "submit" which will cause your form to submit)

2. Use e.preventDefault() in the click event of 'addTaskButton' button

use return false; at the end of your function your page is getting reloaded.