Question

83

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

rated 0 times [ 87] [ 4] / answers: 1 / hits: 5075 / 10 Years ago, wed, december 10, 2014, 12:00:00

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=/>;

}

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

lamarmaximiliand

Add To Favorites

Follow

Total Points: 388

Total Questions: 104

Total Answers: 104

Location: Oman

Member since Fri, Dec 23, 2022

1 Year ago

answered 10 Years ago kourtney · Accepted Answer

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=/></td></tr>;

    $('#taskTable tr:last').after(newRow);

});

Demo: Fiddle