Javascript 代码在IE中工作，但在FF中不工作
我有一个要求，用户将在文本框中键入，文本框将与来自数据库的建议一起归档。然后，用户将选择该选项，单击“添加”按钮，该文本将作为标记添加到动态html表中，以便稍后删除。我一切正常，但问题是我的代码只在IE中工作。在Firefox中运行页面时，它没有运行，也没有显示任何错误。出于测试目的，我用文本框替换了隐藏字段。您可以在“文本”和“值”文本框中键入，然后单击“添加技能”按钮。它在IE中有效，但在FF中无效。等待建议。以下是完整的代码：Javascript 代码在IE中工作，但在FF中不工作,javascript,jquery,asp.net,Javascript,Jquery,Asp.net,我有一个要求，用户将在文本框中键入，文本框将与来自数据库的建议一起归档。然后，用户将选择该选项，单击“添加”按钮，该文本将作为标记添加到动态html表中，以便稍后删除。我一切正常，但问题是我的代码只在IE中工作。在Firefox中运行页面时，它没有运行，也没有显示任何错误。出于测试目的，我用文本框替换了隐藏字段。您可以在“文本”和“值”文本框中键入，然后单击“添加技能”按钮。它在IE中有效，但在FF中无效。等待建议。以下是完整的代码： <%@ Page Language="C#" Auto
<%@ 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> <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> <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>
自动完成
.包装纸
{
背景颜色：银色；
宽度：自动；
}
.selecteditem
{
字体系列：Verdana，Arial，Times New Roman；
字体大小：10px；
}
。选择编辑关闭
{
字体系列：Verdana，Arial，Times New Roman；
字体大小：11px；
字体大小：粗体；
颜色：红色；
光标：指针；
}
。选择编辑关闭：悬停
{
颜色：栗色；
}
函数addRow（）{
var selectedText=$（“#txtSkills”）.val（）；
var selectedValue=$（“#selectedID”）.val（）；
var newRow=document.all（“tblGrid”）.insertRow（）；
var oCell=newRow.insertCell（）；
如果（selectedText==''）{
警报（'请选择一项技能'）；
返回false；
}
否则{
var addedID=$（“#addedID”）.val（）；
如果（addedID！=''）{
if（addedID.indexOf（'，'+selectedValue+'，'）！=-1）{
警惕（'技能已选定'）；
美元（“#txtSkills”）.val（“”）；
$（“#selectedID”）.val（“”）；
返回false；
}
否则{
oCell.innerHTML=”“+selectedText+“x”；
附录SelectedId（selectedValue）；
美元（“#txtSkills”）.val（“”）；
$（“#selectedID”）.val（“”）；
}
}
否则{
oCell.innerHTML=”“+selectedText+“x”；
附录SelectedId（selectedValue）；
美元（“#txtSkills”）.val（“”）；
$（“#selectedID”）.val（“”）；
}
}
}
函数RemoveTow（src，removedValue）{
removeSelectedID（removedValue）；
var oRow=src.parentElement.parentElement.parentElement；
document.all（“tblGrid”）.deleteRow（oRow.rowIndex）；
}
函数appendSelectedID（selectedValue）{
if（$（“#addedID”）.val（）=''）
$（“#addedID”）.val（'，'）；
$（“#addedID”）.val（$（“#addedID”）.val（）+selectedValue+'，'）；
}
函数RemoveSelecteId（removedValue）{
var addedID=$（“#addedID”）.val（）；
var modifiedID=addedID.replace（“，”+removedValue+“，”，“，”）；
$（“#addedID”）.val（modifiedID）；
if（$（“#addedID”）.val（）
$（“#addedID”）.val（“”）；
}
正文：
价值：
集体价值观：
文档。Firefox中不提供所有您应该尝试使用jQuery，它是跨浏览器的，而不是混合使用原生JS和jQuery
文档。Firefox中不提供所有您应该尝试使用jQuery，它是跨浏览器的，而不是混合使用原生JS和jQuery +1，但您还应该提到
document.getElementById（）document.all（）$（“#tblGrid”）.find（'tr'）.remove（）谢谢你。您的代码将在单击任何标记时删除所有元素（添加的标记）。+1，但您还应该提到document.getElementById（）
是document.all（）
大多数用法的完美替代品。如果您知道自己在做什么，那么混合使用JS和jQuery是很好的。jQuery很棒，但在某些情况下，使用标准DOM会更快、更简单。@Spudley-在许多情况下确实如此，但使用parentElement三次，document.all和OP代码中的许多其他怪癖，让我觉得可能最好还是坚持使用jQuery。谢谢大家。我已将document.All替换为document.getElementById及其工作状态。现在剩下的唯一问题是，当我单击删除一行时，id是