2

如果您在 chrome 中渲染下面的代码，您会看到这很好，但如果您使用 IE，则不会添加行。你能告诉我我在这里做错了什么，它不能在 IE 中工作吗？当我在 IE 中添加新行时，我的新行没有添加控件。这在 chrome 和 firefox 中可以正常工作，但在 IE 中不行。除非我遗漏了 IE 特有的内容，否则我在代码中找不到任何错误。感谢您的帮助。

<head>
<title></title>
<script type="text/javascript">

    function insertAdditional() {
        var type = document.getElementById('additional_type').value;
        var node = document.createElement('li');
        node.innerHTML = document.getElementById(type + 'Form').innerHTML;
        document.getElementById('additional').appendChild(node);
    }


    function addRow(tableID) {

        var table = document.getElementById(tableID);

        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);

        var cell1 = row.insertCell(0);
        var element1 = document.createElement("input");
        element1.type = "checkbox";
        element1.name = "chkbox[]";
        cell1.appendChild(element1);

        var cell2 = row.insertCell(1);
        var element2 = document.createElement("input");
        element2.type = "date";
        element2.size = "12";
        element2.maxlength = "10";
        element2.placeholder = "YYYY-MM-DD";
        element2.name = "entrydate[]";
        cell2.appendChild(element2);

        var cell3 = row.insertCell(2);
        var element3 = document.createElement("input");
        element3.type = "date";
        element3.size = "12";
        element3.maxlength = "10";
        element3.placeholder = "YYYY-MM-DD";
        element3.name = "eventdate[]";
        cell3.appendChild(element3);


        var cell4 = row.insertCell(3);
        var element4 = document.createElement("textarea");
        element4.type = "text";
        element4.name = "comment[]";
        element4.rows = "4";
        element4.cols = "60";
        cell4.appendChild(element4);

    }

    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) {
                    table.deleteRow(i);
                    rowCount--;
                    i--;
                }


            }
        } catch (e) {
            alert(e);
        }
    }

</script>
</head>
<body>
<h1>
    Comments</h1>
<div>
    <input type="button" value="Add Comment" onclick="addRow('dataTable')" />
    <input type="button" value="Delete Comment" onclick="deleteRow('dataTable')" />     </div>
<table id="dataTable" width="1024px" border="1" cellpadding="10">
    <tr>
        <th>
            <center>
                Choose</center>
        </th>
        <th>
            <center>
                Entry Date</center>
        </th>
        <th>
            <center>
                Event Date</center>
        </th>
        <th>
            <center>
                Comment</center>
        </th>
    </tr>
    <tbody>
        <tr>
            <td>
                <input type="checkbox" name="chk[]" />
            </td>
            <td>
                <input type="date" placeholder="YYYY-MM-DD" size="12" maxlength="10" name="entrydate[]" />
            </td>
            <td>
                <input type="date" placeholder="YYYY-MM-DD" size="12" maxlength="10" name="eventdate[]" />
            </td>
            <td>
                <textarea rows="4" cols="60" maxlength="500" name="comment[]"></textarea>
            </td>
        </tr>
    </tbody>
</table>
</body>
4

3 回答 3

4

因为IE 不支持日期输入，除了 Opera 和一些最近的浏览器之外，任何浏览器也不支持。Chrome 有部分支持，从 Chrome 20 开始。

正如评论中所指出的，IE 在更改输入类型时有些问题。IE 确实默认为text，但为避免出现问题，IEcreateElement接受一个 HTML 字符串，您可以在其中定义类型：

//creating a radio button
var newRadioButton = document.createElement("<input type='radio' />");
于 2013-05-05T14:53:32.530 回答
2

Internet Explorer（甚至 10）不支持date类型的输入元素。不仅如此：当尝试将此类类型（或任何其他不受支持的类型）分配给动态创建的输入元素时，JavaScript 将因错误而崩溃，并且代码执行将在该点停止。

为了克服这个问题并在浏览器不支持所需类型时默认返回文本.setAttribute()类型，请使用方法而不是直接赋值：

element2.setAttribute("type", "date");

这个技巧和更多可以在这里找到。

于 2013-05-05T17:04:25.527 回答
0

尝试这个：

try {
    element2.type = "date";
} catch(e) {
    element2.type = "text";
}

这将在支持它的浏览器上使用date输入，并回退到text其他浏览器。

于 2013-05-05T15:04:24.593 回答