JavaScript事件在IE 8中不起作用

时间:2013-10-07 16:10:54

标签: javascript internet-explorer internet-explorer-8

似乎IE8忽略了我的点击事件!当我按下“+”按钮并在“ - ”上删除它时,它应该添加一个新行。我是WEB开发的新手,但我看不到任何其他问题。我测试它,它与IE10,IE9工作正常,但不适用于IE8!你能帮我解决这个问题吗?

我的HTML代码:

<table id="sysAffectedTable2">
    <thead>
        <tr>
            <th>#</th>
            <th><span class="locationName">Location Name</span></th>
            <th>Subnet (Optional)</th>
            <th>Add</th>
            <th>Delete</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td><input type="text" id="locationName1" value="" name="locationName1"/></td>
            <td><input type="text" id="subnet1" value="" name="subnet1"/></td>
            <td><input type="button" style="width: 40px" id="addDiskButton2" value="  +  " onclick="insertRow2()"/></td>
            <td><input type="button" style="width: 40px" id="delDiskButton2" value="  -  " onclick="deleteRow2(this)"/></td>    
        </tr>
    </tbody>        
    </table>    

我的javaScript代码:

<script type="text/javascript" language="javascript">
    var maxRow2=1;


    var table2 = document.getElementById('sysAffectedTable2'), tbody2 = table2
            .getElementsByTagName('tbody')[0], clone2 = tbody2.rows[0]
            .cloneNode(true);

    function deleteRow2(el) {
        var i = el.parentNode.parentNode.rowIndex;

        if (i != 1) {
            table2.deleteRow(i);
            while (table2.rows[i]) {
                updateRow2(table2.rows[i], i, false);
                i++;
            }
            maxRow2--;
        } else if (i == 1) {
            table2.deleteRow(i + 1);
            while (table2.rows[i + 1]) {
                updateRow2(table2.rows[i + 1], i + 1, false);
                i++;
            }
            maxRow2--;
        }
    }

    function insertRow2() {
        if (maxRow2 < 32) {
            var new_row = updateRow2(clone2.cloneNode(true),
                    ++tbody2.rows.length, true);
            tbody2.appendChild(new_row);
            maxRow2++;
        }
    }

    function updateRow2(row2, a2, reset2) {
        row2.cells[0].innerHTML = a2;

        var inp1 = row2.cells[1].getElementsByTagName('input')[0];
        var inp2 = row2.cells[2].getElementsByTagName('input')[0];

        inp1.name = 'locationName' + a2;
        inp1.id = 'locationName' + a2;
        inp2.name = 'subnet' + a2;
        inp2.id = 'subnet' + a2;

        if (reset2) {
            inp1.value = inp2.value = '';
        }
        return row2;
    }
</script>

您可以在实时here - http://jsfiddle.net/yHANj/1/

中查看

请你能帮助我!

提前致谢!

1 个答案:

答案 0 :(得分:1)

此行遇到错误:++tbody2.rows.length

显然,IE8的javascript引擎与其他浏览器的处理方式不同,但是能够在 any 中更改表的行数的length属性是没有意义的。浏览器。如果你想改变表中的行数,你可以通过插入一个新的DOM元素(你正在使用.appendChild()调用来实现)。

将其更改为tbody2.rows.length + 1,而不是直接尝试增加length属性。

编辑:的确,如果您尝试增加length个其他浏览器,则该语句似乎会被忽略。 IE8抛出异常而不是忽略它。