Код, работающий в IE, но не в FF

У меня есть требование, чтобы пользователь вводил текстовое поле, и текстовое поле будет подаваться с предложениями из базы данных. Затем пользователь выберет опцию и нажав кнопку добавления, этот текст будет добавлен как тег в динамическую таблицу html, чтобы впоследствии ее можно было удалить. У меня все работает нормально, но проблема в том, что мой код работает только в IE. При запуске страницы в Firefox он не работает, а также не показывает никаких ошибок. Для целей тестирования я заменил скрытые поля текстовыми полями. Вы можете ввести текстовые поля «Текст» и «Значение» и нажать «Добавить навыки». Он будет работать в IE, но не в FF. Ожидание предложений. Вот полный код:Код, работающий в 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>

источник

2013-05-09 user1640256

document.all не доступна в Firefox. Это проприетарный метод IE, который также используется webkit и Opera, но не Firefox.

Вы должны попробовать придерживаться jQuery, который является перекрестным браузером, вместо смешивания собственных JS и jQuery!

источник

2013-05-09 14:51:03 adeneo

+1, но вы также должны упомянуть, что 'document.getElementById()' отлично подходит для большинства способов использования document.all() '. И это прекрасно, чтобы смешивать JS и jQuery, если вы знаете, что делаете. jQuery - это замечательно, но в некоторых случаях это быстрее и так же просто использовать стандартный DOM. – Spudley

@Spudley - это правда во многих случаях, но с использованием parentElement три раза, document.all и много других причуд в коде OP, заставляет меня думать, что, вероятно, лучше просто придерживаться jQuery для всего. – adeneo

Спасибо, ребята. Я заменил document.All с document.getElementById и его работой. Теперь остается единственной проблемой, когда я нажимаю, чтобы удалить строку, идентификатор удаляется из текстового поля, но HTML для строки в таблице остается неповрежденным. adeneo прав, что, возможно, использование parentElement раз создает проблему. Причина смешивания jquery и собственного JS заключается в том, что мне нужно создать динамическую таблицу, и я не мог найти хороший пример, как это сделать, поэтому я использовал ту, которая была доступна в JS. Может ли кто-нибудь сказать мне, как удалить строку с помощью JS или JQuery? Моя таблица имеет только одну ячейку каждой строки. – user1640256

Код, работающий в IE, но не в FF

ответ

Смежные вопросы