javascript - innerHTML 不适用于 IE 中的 <datalist> HTML5 元素

Question

我正在尝试通过单击按钮将行动态添加到 HTML 表中。

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

但对于所有由按钮添加的新行，数据列表不起作用。下面是我的表格和正在添加行的 JavaScript。 JavaScript 中的 innerHTML 似乎不适用于 IE 中的数据列表元素。是否有任何解决方法可以让 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()，这样新的数据列表也会被激活。