External javascript file not working in IE

Question

I created this test html page that allows a single user to add entries to a table. It works fine in Chrome and Firefox. But when I try it in IE it doesn't work. I went to the Console and it doesn't give me any errors when I attempt to add a row. Can someone please help me figure out what I need to get the javascript portion working? Many thanks in advance. Here is what I have

HTML

<!DOCTYPE html>
<html>
    <link rel="stylesheet" href="css/style.css">
    <script src="javascript/script.js"></script>    
    <body>      
        <h1>Hello World</h1>
        <table id="myTable" class="editableTable">
            <caption><center>Table No 1</center></caption>
            <thead> 
                <tr> 
                    <th>ID</th> 
                    <th>Name</th> 
                    <th>Phone</th> 
                    <th>Email</th> 
                    <th>Address</th> 
                </tr> 
            </thead> 
            <tbody id="tablebody"> 
                <tr style="display:none" id="templaterow"> 
                    <td><div contenteditable></div></td> 
                    <td><div contenteditable></div></td> 
                    <td><div contenteditable></div></td> 
                    <td><div contenteditable></div></td> 
                    <td><div contenteditable></div></td>  
                    <td><input type ="image" src="assets/trash.ico" class="deleteIcon" onclick="myDeleteFunction(this)" /></td>                 
                </tr>           
            </tbody>            
        </table>
        <div class="tablebuttons"> <button onclick="myCreateFunction()">Add entry</button></div>        
    </body>
</html>

CSS

body {
    background-color: white;
}

h1 {
    text-align: center;
}

* { 
    font-family:Consolas 
} 

.editableTable { 
    border:solid 1px; 
    width:100%; 
} 

.editableTable td { 
    border:solid 1px; 
} 

.editableTable .cellEditing { 
    padding: 0; 
} 
.editableTable .cellEditing input[type=text]{ 
    width:100%; 
    border:0; 
    background-color:rgb(255,253,210); 
}

.deleteIcon {
    position: relative; 
    left: 25%;
    width: 15px;
    height: 15px;
}

Javascript

function myCreateFunction() {
    var newInstance = document.getElementById("templaterow").cloneNode(true);
    newInstance.style.display = null;
    newInstance.id = null;

    document.getElementById("tablebody").appendChild(newInstance);
}

function myDeleteFunction(r) {
    var rowCount = myTable.rows.length;
    var i = r.parentNode.parentNode.rowIndex;

    if(rowCount <= 1) return;

    document.getElementById("myTable").deleteRow(i);
}

Krii · Accepted Answer · 2015-11-02 17:19:40Z

1

This works for me (it took long enough).

newInstance.style.display = null;

to

newInstance.style.display = "";

Change null values to "". See Fiddle.

answered Nov 2, 2015 at 17:19

Krii

9079 silver badges23 bronze badges

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

Collectives™ on Stack Overflow

External javascript file not working in IE

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related