Rows disappearing when adding them dynamically to table with JS/jQuery

Question

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 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>

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=\"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\"/>";
}

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.

haven't you noticed your page refreshing? ... it's from the form submitting — charlietfl, Dec 10 '14 at 03:36

score 2 · Accepted Answer · answered Dec 10 '14 at 03:34

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=\"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);
});

Demo: Fiddle

...and to think, this was covered in one of the other questions and I missed it. Thank you, sir! — thyeggman, Dec 10 '14 at 03:38

score 2 · Answer 2 · answered Dec 10 '14 at 03:35

2

add e.preventDefault()

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

answered Dec 10 '14 at 03:35

roullie

2,830
16
26

wizzardz · Answer 3 · 2014-12-10T03:48:43.433

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

Change the type of button element to "button".(The default type is "submit" which will cause your form to submit)
Use e.preventDefault() in the click event of 'addTaskButton' button

score 0 · Answer 4 · answered Dec 10 '14 at 03:38

0

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

answered Dec 10 '14 at 03:38

Sagar Chavan

507
1
7
15

Rows disappearing when adding them dynamically to table with JS/jQuery

4 Answers4