4

我正在尝试通过单击按钮动态地将行添加到 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);
}
}
4

2 回答 2

1

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

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

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

于 2015-05-05T13:26:21.160 回答
1

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

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

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

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

于 2015-05-05T13:28:08.687 回答