Insert new row, hide column in Javascript?

Question

I have a Javascript like this:

<script language="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[0].cells[i].innerHTML;

                switch(newcell.childNodes[0].type) {
                    case "text":
                            newcell.childNodes[0].value = "";
                            break;
                }
            }
        }

            var showMode = 'table-cell';
            if (document.all) showMode='block';
            function toggleVis(btn){
            btn   = document.forms['tcol'].elements[btn];
            cells = document.getElementsByName('t'+btn.name);
            mode = btn.checked ? showMode : 'none';
            for(j = 0; j < cells.length; j++) cells[j].style.display = mode;
            }
</script>

The following is HTML for show/hide the columns and insert new row:

<body>

<form name="tcol" onsubmit="return false">
Show columns
<input type=checkbox name="col1" onclick="toggleVis(this.name)" checked> 1
<input type=checkbox name="col2" onclick="toggleVis(this.name)" checked> 2
<input type=checkbox name="col3" onclick="toggleVis(this.name)" checked> 3
</form>

<input type="button" value="Insert Row" onclick="addRow('dataTable')">
<table id="dataTable">
<tr>
<td name="tcol1" id="tcol1"><input type="text" name="txt1"></td>
<td name="tcol2" id="tcol2"><input type="text" name="txt2"></td>
<td name="tcol3" id="tcol3"><input type="text" name="txt3"></td>
</tr>
</table>

I can insert row, but only the first row's column can be hidden. Is it because of the input fields' attributes? If yes, how do I add tag attribute into new row? Please help me out on this. Thanks.

You are making this waaay too complicated. – mrtsherman Dec 28 '12 at 06:37 — mrtsherman, Dec 28 '12 at 06:37

Amit Gaikwad · Accepted Answer · 2012-12-31T06:47:52.140

1

newcell.innerHTML = table.rows[0].cells[i].innerHTML wont copy attribute to new cell, it will just copy innerHtml of table.rows[0].cells[i] cell.

So name attribute wont get applied to newcelll toggleVis functions work by finding cells by name attribute.

You can add following code in addRow to apply name attribute to newcell.

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[0].cells[i].innerHTML;
           newcell.setAttribute("name",table.rows[0].cells[i].getAttribute("name"));//use setAttribute to set any attribute of dom element
        newcell.style.display = table.rows[0].cells[i].style.display ; // to copy display style 
           newcell.id = table.rows[0].cells[i].getAttribute("name"); // IE workaround for getting this table cell in getElementsByName , see this http://stackoverflow.com/questions/278719/getelementsbyname-in-ie7

            switch(newcell.childNodes[0].type) {
                case "text":
                        newcell.childNodes[0].value = "";
                        break;
            }
        }
    }

edited Dec 31 '12 at 06:47

answered Dec 28 '12 at 07:33

Amit Gaikwad

923
1
9
15

Thanks for your help. But how do I add the name attribute into the new fields' tag after getting the attribute from existing fields? – Lorek Bryanson Dec 28 '12 at 07:55
Please ignore my last question. I've applied the name attribute into new row but the columns beside first row still couldn't be hidden. Do you have any idea what the problem could be? – Lorek Bryanson Dec 28 '12 at 08:10
hey, i updated my answer with changes, use setAttribute to set copy name attribute to new cell. also there is problem with IE for getElementsByName, see this http://stackoverflow.com/questions/278719/getelementsbyname-in-ie7, "Elements that support both the NAME attribute and the ID attribute are included in the collection returned by the getElementsByName method, but elements with a NAME expando are not included in the collection; therefore, this method cannot be used to retrieve custom tags by name", so workaround is to set ID attribute also. – Amit Gaikwad Dec 31 '12 at 06:50
Thank you so much for your help and your clear explanation. And thanks for your IE workaround. – Lorek Bryanson Jan 02 '13 at 00:33

score 0 · Answer 2 · answered Dec 28 '12 at 06:52

I know this doesn't answer your specific question, but your code needs a lot of help. The way you are doing things is very prone to breakage and can be accomplished in a much simpler way. Here is one example. I used jQuery to save myself time, but the principles can be mapped to plain javascript if you don't want to use jQuery.

Don't use inline javascript calls. You can monitor the parent container of the checkbox and determine which one was changed.
Don't monitor onclick events for checkboxes. Use onchange instead. This is safer.
You can use the html5 data attribute to store which checkbox was clicked. For example, <input type=checkbox name="col1" checked data-number="1"> 1.
Use the clicked data field to determine which cell in the table you want to modify.

http://jsfiddle.net/E3D2U/

$('input:checkbox').change( function() {
    //which checkbox was changed?
    var number = $(this).data('number') - 1;
    //get the table cell that matches the clicked number
    var targetTD = $('#dataTable td')[number];
    //if our checkbox is checked then...
    if ($(this).is(':checked')) {
        $(targetTD).css('background-color', 'white');            
    }
    else {
        $(targetTD).css('background-color', 'yellow');                
    }
});

Thank you for your suggestion. I would really like to use your code as an example, but wouldn't it be same for the tag attribute? From your example, how do I add data-number into new rows' tag? — Lorek Bryanson, Dec 28 '12 at 07:10
I'm not even sure what `tag` attribute is because no such thing exists in html. An attribute is like `checked="checked"` or `name="foo"`. A `tag` means nothing to me. — mrtsherman, Dec 28 '12 at 22:57

Insert new row, hide column in Javascript?

2 Answers2