Question

我要求用户输入文本框，文本框将与数据库中的建议一起提交。然后，用户将选择该选项，并在单击“添加”按钮时，此文本将作为标记添加到动态html表中，以便以后删除。我有一切正常，但问题是我的代码只在IE中工作。在Firefox中运行页面时，它没有运行，也没有显示任何错误。出于测试目的，我已经用文本框替换了隐藏字段。您可以键入“文本”和“值”文本框，然后单击“添加技能”按钮。它可以在IE中工作，但不能在FF中工作。等待建议。这是完整的代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AddSkills.aspx.cs" Inherits="AddSkills" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>AutoComplete</title>
    <style type="text/css">
        .wrapper
        {
            background-color: Silver;
            width: auto;
        }
        .selecteditem
        {
            font-family: Verdana,Arial,Times New Roman;
            font-size: 10px;
        }
        .selecteditemClose
        {
            font-family: Verdana,Arial,Times New Roman;
            font-size: 11px;
            font-weight: bold;
            color: Red;
            cursor: pointer;
        }
        .selecteditemClose:hover
        {
            color: Maroon;
        }
    </style>

    <script src="jquery-1.7.1.min.js" type="text/javascript" language="javascript"></script>

    <script language="javascript" type="text/javascript">
        function addRow() {
            var selectedText = $("#txtSkills").val();
            var selectedValue = $("#selectedID").val();
            var newRow = document.all("tblGrid").insertRow();
            var oCell = newRow.insertCell();

            if (selectedText == '') {
                alert('Please select a skill.');
                return false;
            }
            else {
                var addedID = $("#addedID").val();
                if (addedID != '') {
                    if (addedID.indexOf(',' + selectedValue + ',') != -1) {
                        alert('Skill already selected.');
                        $("#txtSkills").val('');
                        $("#selectedID").val('');
                        return false;
                    }
                    else {
                        oCell.innerHTML = "<span class='wrapper'><span class='selecteditem'>" + selectedText + "</span>&nbsp;<span class='selecteditemClose' onclick=\"removeRow(this,'" + selectedValue + "');\">x</span></span>";
                        appendSelectedID(selectedValue);
                        $("#txtSkills").val('');
                        $("#selectedID").val('');
                    }
                }
                else {
                    oCell.innerHTML = "<span class='wrapper'><span class='selecteditem'>" + selectedText + "</span>&nbsp;<span class='selecteditemClose' onclick=\"removeRow(this,'" + selectedValue + "');\">x</span></span>";
                    appendSelectedID(selectedValue);
                    $("#txtSkills").val('');
                    $("#selectedID").val('');
                }
            }
        }


        function removeRow(src, removedValue) {
            removeSelectedID(removedValue);
            var oRow = src.parentElement.parentElement.parentElement;
            document.all("tblGrid").deleteRow(oRow.rowIndex);
        }
        function appendSelectedID(selectedValue) {
            if ($("#addedID").val() == '')
                $("#addedID").val(',');
            $("#addedID").val($("#addedID").val() + selectedValue + ',');
        }
        function removeSelectedID(removedValue) {
            var addedID = $("#addedID").val();
            var modifiedID = addedID.replace(',' + removedValue + ',', ',');
            $("#addedID").val(modifiedID);
            if ($("#addedID").val() == ',')
                $("#addedID").val('');
        }
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        Text:<asp:TextBox ID="txtSkills" runat="server"></asp:TextBox>
        <%--These textboxes are supposed to be hidden fields. For the testing purpose they are used as textboxes--%>
        Value:<asp:TextBox ID="selectedID" runat="server"></asp:TextBox>
        Collective Values:<asp:TextBox ID="addedID" runat="server"></asp:TextBox>
        <input type="button" value="Select Skill" onclick="return addRow();" />
        <table id="tblGrid" border="0" cellpadding="2" cellspacing="2" width="250px">
        </table>
        <br />    


    </div>
    </form>
</body>
</html>

Answer 1

Firefox中没有

document.all。它是一种专有的IE方法，也被webkit和Opera采用，但不是Firefox。

你应该尝试坚持使用跨浏览器的jQuery，而不是混合本机JS和jQuery！

代码在IE中工作但在FF中不工作

1 个答案: