innerHTML is not working for <datalist> HTML5 element in IE

Question

I am trying to add rows to HTML table dynamically by clicking a button.

My table has a column with HTML5 datalist element. I can see dropdown values in datalist when page loaded initially with default first row.

But for all new rows added by button datalist is not working. Below is my table and JavaScript which is adding rows. The innerHTML in JavaScript doesn't seem to be working for the datalist element in IE. Is there any workaround to get innerHTML to work for HTML5 elements?

HTML:

<input type="button" value="Add Row" onclick="javascript:addRow('dataTable')">
<input type="button" value="Delete Row" onclick="javascript:deleteRow('dataTable')">
<table id="dataTable" name="dataTable" border="1" WIDTH="1240">
    <col width="40">
        <col width="100">
            <tr>
                <th>Select</th>
                <th>Column4</th>
            </tr>
            <tbody>
                <tr>
                    <td WIDTH="40">
                        <input type="checkbox" name="Select">
                    </td>
                    <td WIDTH="100">
                        <input type='text' list='Column4' id='element_10' style='display:table-cell; width:100%'>
                        <datalist id='Column4'>
                            <!--[if !IE]><!-->
                                <select>
                                <!--<![endif]-->
                                <option label='' value=''>
                                    <option label='' value='Datalist1'>
                                        <option label='' value='Datalist2'>
                                            <!--[if !IE]><!-->
                                </select>
                            <!--<![endif]-->
                        </datalist>
                        <script>
                            $(document).ready(function() {
                                $('input[list]').datalist();
                            });
                        </script>
                    </td>
                </tr>
            </tbody>
</table>

JavaScript:

function addRow(tableID){
var table=document.getElementById(tableID);
var rowCount=table.rows.length;
var row=table.insertRow(rowCount);
var colCount=table.rows[1].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;
    }
}
}
function deleteRow(tableID)
{
try{
var table=document.getElementById(tableID);
var rowCount=table.rows.length;
for(var i=0;i<rowCount;i++)
    {
        var row=table.rows[i];
        var chkbox=row.cells[0].childNodes[0];
        if(null!=chkbox&&true==chkbox.checked)
            {
                if(rowCount<=1)
                {
                alert("Cannot delete all the rows.");
                break;
                }
              table.deleteRow(i);rowCount--;i--;}
              }
}
catch(e)
{
alert(e);
}
}        

Answer 1

So far I can see two problems with your code. First of all, you copy the innerHTML from one cell to another, but you don't change the ID on the datalist . This means that you have multiple datalists with the same ID, which could cause browsers to behave strangely.

Second, you call $('input[list]').datalist() on page load, but you add new datalists after that. I'm assuming datalist() is a jQuery plugin/shim to make datalists work in older browsers?

If that is the case, you will want to run $('input[list]').datalist() again after adding more rows, so the new datalists also get activated.

Answer 2

You seem to be using the jQuery datalist plugin for adding datalist support for older versions of Internet Explorer (on IE 9 and up, datalist elements are supported natively and your code works flawlessly there). The problem is that you're calling the plugin's datalist() function only once after the page has loaded:

<script>
    $(document).ready(function() {
        $('input[list]').datalist();
    });
</script>

This only makes those datalists functional which are currently in the DOM, but not those that will be there in the future . What this means is that you need to call the datalist() function every time after you added a new datalist to the page.

(By the way: if you put the script block at the end of the body, all elements before it have already been loaded, so you don't need to wrap this code with $(document).ready(function() { ... }) .)