thyeggman thyeggman -4 years ago 81
HTML Question

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

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%">
<table id="taskTable" style="width:100%">
<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>
<td><input id="compTime_T1" value="5"/></td>
<select id="resNeeded_T1" name="res_T1">
<option value="yes">Yes</option>
<option value="no">No</option>
<td><input id="period_T1" value="20"/></td>
<td><input id="priority_T1" value="0"/></td>
<button id="addTaskButton">Add task...</button><br><br>
<input type="button" id="submitTaskSet" value="Generate Schedule"/>
<input type="button" id="resetTable" value="Clear Schedule"/>

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();});

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.

Answer Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download