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

Posted 2023-05-07

【中文标题】innerHTML 不适用于 IE 中的 <datalist> HTML5 元素

【英文标题】：innerHTML is not working for <datalist> HTML5 element in IE

【发布时间】：2015-07-15 01:08:44

【问题描述】：

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

我的表格有一列包含 HTML5 数据列表元素。最初使用默认第一行加载页面时，我可以在 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 >
        <col >
            <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);

        

【问题讨论】：

你可能想尝试让你的 HTML-sn-p 小一点（只显示有趣的部分），这样你就不会吓跑别人。 ;)

减少编号。 HTML 片段中的行数:)

addRow() 是做什么的？ $.datalist() 是什么？如果您可以在 jsfiddle.net 中重新创建页面，那将更容易调试。

斯蒂芬斯怎么说。你的 JS 有很多不清楚的地方，还有这个 var row=table.insertRow(rowCount); 是什么。顺便说一句，我不知道您使用的是哪个版本的 IE，但请查看 caniuse.com/#feat=datalist 并且控制台是否出现错误？

嗨@Mikey Stephan Muller，我已经更新了上面JS的缺失部分。 addRow() 一次插入一个单元格并使用innerHTML 复制元素。但是对于 datalist 元素，它在 IE 中不起作用。 $.datalist() 函数正在使用 jQuery datalist 插件github.com/miketaylr/jquery.datalist.js

【参考方案1】：

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

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

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

【参考方案2】：

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

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

这只会使那些 当前在 DOM 中的数据列表起作用，而不是那些 将来会出现的数据列表。这意味着每次向页面添加新数据列表后，您都需要调用datalist() 函数。

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