innerHTML不起作用 <datalist> IE中的HTML5元素

Question

我试图通过单击按钮动态地向HTML表添加行。

我的表有一个HTML5 datalist元素的列。 当最初使用默认第一行加载页面时，我可以在datalist中看到下拉列表值。

但是对于按钮datalist添加的所有新行都不起作用。 下面是我的表和JavaScript添加行。 JavaScript中的innerHTML似乎不适用于IE中的datalist元素。 是否有任何解决方法可以使innerHTML适用于HTML5元素？

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

到目前为止，我可以看到您的代码存在两个问题。 首先，将innerHTML从一个单元格复制到另一个单元格，但不要更改datalist上的ID。 这意味着您有多个具有相同ID的数据列表，这可能会导致浏览器行为异常。

其次，在页面加载时调用$('input[list]').datalist() ，但之后添加新的数据列表。 我假设datalist()是一个jQuery插件/垫片，使数据列表在旧版浏览器中工作？

如果是这种情况，您将需要在添加更多行后再次运行$('input[list]').datalist() ，以便新的数据列表也被激活。

Answer 2

您似乎正在使用jQuery datalist插件为旧版本的Internet Explorer添加数据主义支持（在IE 9及更高版本上，本地支持datalist元素，并且您的代码在那里完美运行）。 问题是你在页面加载后只调用插件的datalist()函数一次：

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

这只会使那些当前位于DOM中的数据列表功能正常，但不会使那些将来存在的那些数据列表功能。 这意味着您需要在每次向页面添加新的数据列表后调用datalist()函数。

（顺便说一下：如果你把脚本块放在正文的末尾，那么它之前的所有元素都已经被加载了，所以你不需要用$(document).ready(function() { ... })包装这个代码$(document).ready(function() { ... }) 。）