Adding/Removing row dynamically in html using javascript

Question

I have this particular snippet..

newcell.innerHTML = table.rows[0].cells[i].innerHTML;
//alert(newcell.childNodes);
switch(newcell.childNodes[0].type) {
case "text":
    newcell.childNodes[0].value = "";
    break;
case "checkbox":
    newcell.childNodes[0].checked = false;
    break;
case "select-one":
    newcell.childNodes[0].selectedIndex = 0;
    break;
case "number":
    newcell.childNodes[0].value = '';
    break;
}

the switch above makes the newly added rows to reset the value from the copied row.

the text and number resets.

but the drop-down and checkboxes do not

what commands does these two need to reset their values? for the dropdown, the first option and for the checkboxes is no box is checked

EDIT: this is the whole code

<script type="text/javascript">
    function addRow(tableID) {

        var table = document.getElementById(tableID);

        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);

        var colCount = table.rows[0].cells.length;

        for(var i=0; i<colCount; i++) {
            var newcell=row.insertCell(i);
            newcell.innerHTML=table.rows[1].cells[i].innerHTML;
            switch(newcell.childNodes[0].type) {
                case "text":
                    newcell.childNodes[0].value = "";
                    break;
                case "checkbox":
                    newcell.childNodes[0].checked = false;
                    break;
                case "select-one":
                    newcell.childNodes[0].selectedIndex = 0;
                    break;
                case "number":
                    newcell.childNodes[0].value = '';
                    break;
            }
        }
    }
    function deleteRow(tableID) {
        try {
        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;
        var colCount = table.rows[0].cells.length;

        for(var i=0; i<rowCount; i++) {
            var row = table.rows[i];
            var chkbox = row.cells[colCount-1].childNodes[0];
            if(null != chkbox && true == chkbox.checked) {
                if(rowCount <= 2) {
                    alert("Cannot delete all the rows.");
                    break;
                }
                table.deleteRow(i);
                rowCount--;
                i--;
            } 
        }
        }catch(e) {
            alert(e);
        }
    }
</script>
<body>
<label><input type="checkbox" id='checkboxId'>N/A</label>   
<br>
<div id="div-table-id">
    <table id='table-id' border="1">
        <tr>
            <th>Subject</th>
            <th>Section Code</th>
            <th>Room</th>
            <th>Days</th>
            <th>Start Time</th>
            <th>End Time</th>
            <th>Hours Per Week</th>
            <th>No of Students (A)</th>
            <th>Course Credit w/o multiplier(B)</th>
            <th>Student Credit Units (AxB)</th>
            <th>Teaching Load Credits with Multiplier</th>
            <th>Delete?</th>
        </tr>
        <tr>
            <td>
                <select name="subject" >
                    <option value="cmsc2">CMSC2</option>
                    <option value="cmsc11" selected="selected">CMSC11</option>
                    <option value="cmsc121">CMSC121</option>
                </select>
            </td>
            <td><input type="text" id="password" value="sample"/></td>
            <td><input type="text" id="password2" value="sample"/></td>
            <td>
                <input type="checkbox" name="days" value="m" checked>M
                <input type="checkbox" name="days" value="t">T
                <input type="checkbox" name="days" value="m">W
                <input type="checkbox" name="days" value="th">Th
                <input type="checkbox" name="days" value="f">F
                <input type="checkbox" name="days" value="s">S
            </td>
            <td><input type="time" name="start_time"></td>
            <td><input type="time" name="end_time"></td>
            <td><input type="number" name="hpw"></td>   
            <td><input type="number" name="nos"></td>
            <td><input type="number" name="ccm"></td>
            <td><input type="number" name="scu"></td>
            <td><input type="number" name="tlcm"></td>
            <td><input type="checkbox" name="chk"></td>
        </tr>
    </table>
    <input type="button" value="Add Row" onclick="addRow('table-id')" />
    <input type="button" value="Delete Row" onclick="deleteRow('table-id')"/>       
    <input type="button" value="Save"/>

</div>

<script>
    document.getElementById('checkboxId').onchange = function () {
        var elems = document.getElementById('div-table-id').querySelectorAll('input,select,textarea');
        if (document.getElementById('checkboxId').checked) {
            for (var i = 0; i < elems.length; i++) {
                elems[i].disabled = true;
            }
        } else {
            for (var i = 0; i < elems.length; i++) {
                elems[i].disabled = false;
            }    
        }
    }
    document.getElementById('password2').disabled = true;
    document.getElementById('password').onblur = function(){
        if(document.getElementById('password').value != '')
            document.getElementById('password2').disabled = false;
        else{
            document.getElementById('password2').value = '';
            document.getElementById('password2').disabled = true;
        }
        document.getElementById("password2").select();
    }
    document.getElementById('password2').onblur = function (){
        if(document.getElementById('password').value == '')
            return;
        check();
    }

    function check() {
        if (document.getElementById('password2').value != document.getElementById('password').value) {
            alert('The two passwords must match.');
            document.getElementById("password").select();
            document.getElementById('password2').value = '';
        }
        else 
            alert('The two passwords matched.');
    }
</script>

put in jsfiddle, jsfiddle.net for ease of solving your question — Se0ng11
– Se0ng11, Commented May 14, 2014 at 3:34
Try newcell.childNodes[0].removeAttribute('checked'); for the checkbox. Code for select looks fine to me, not sure why it wouldn't work. Can you post example HTML? — christian314159
– christian314159, Commented May 14, 2014 at 4:50
@christian314159 edited the question and posted the whole code — user1730941
– user1730941, Commented May 14, 2014 at 5:53

christian314159 · Accepted Answer · 2014-05-14 11:13:46Z

2

Ok, I figured out what your problem is. When you assign your new table cell's content to be the first row's content like so

newcell.innerHTML=table.rows[1].cells[i].innerHTML;

you copy along a bit of white space around your input/select elements sometimes which become text nodes. Thus your DOM will actually look like this in case of your SELECT element in the first TD:

[0] #Text node
[1] SELECT
[2] #Text node

This means when you grab the first child newcell.childNodes[0] you grab the Text node and the SELECT or CHECKBOX stays untouched. I rewrote your code including a function that will reset all children of a new cell, as this also covers cases where someone checked more checkboxes in the first row which you use to append a new row.

function addRow(tableID) {

        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);
        var colCount = table.rows[0].cells.length;

        for( var i=0; i < colCount; i++ ){

            var newcell=row.insertCell(i);
            newcell.innerHTML=table.rows[1].cells[i].innerHTML;

            resetChildren( newcell );
        }
    }

function resetChildren( parentEl ){
    var len = parentEl.childNodes.length,
        i = 0,
        el;

    for(i = 0; i < len; i++){

        el = parentEl.childNodes[i];

        console.log( i, el.type, el );

        switch( el.type ){
            case "text":
                el.value = "";
                break;
            case "checkbox":
                el.removeAttribute('checked');
                break;
            case "select-one":
                el.selectedIndex = 0;
                break;
            case "number":
                el.value = '';
                break;
        }
    }
}

answered May 14, 2014 at 11:13

christian314159

6393 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user1730941 Over a year ago

Very nice answer. Thanks to this but I just saw your answer now. I've made a solution that I add an additional row that is blank and I just copy it to add row.not the first row but the last blank row. sorry for the inconvenience but when I tried your work, it works like a charm. thanks by the way

user1730941 Over a year ago

stackoverflow.com/questions/23668870/… i've got a followup problem, hope you can solve it. thanks

Collectives™ on Stack Overflow

Adding/Removing row dynamically in html using javascript

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related