2012-04-02 2 views
0

Im в месте, пытающемся заставить этот ярлык Jquery работать в моем текущем проекте, у меня есть текстовое поле, в котором пользователь вводит номер мобильного телефона, который они хотят в HTML-таблице, когда они нажимают кнопку i был ярлыком JQuery, чтобы нанести удар и выделить все мобильные номера, которые соответствуют критериям, введенным пользователем, но для somereason он, похоже, не работает, и он не выдает ошибку?!?! Может кто-то мне помочь, пожалуйста.Использование JQuery Highlight

$('#<%= BtnFindMobile.ClientID %>').click(function() { 
      var phonenumber = $('#<%= txtSearchMobile.ClientID %>').val(); 
      $('#grdvHandSets td.highlight').removeClass('highlight'). // Clear existing highlights 
      // Find matching phonenumber fields 
      find('input.phonenumber').filter(function() { 
      return $(this).val() == phonenumber; 
      }). 
      closest('td').addClass('highlight'); // And highlight these cells 
      return false; 
     }); 

Heres HTML-таблицы и его второй TD я хочу, чтобы ссылаться на столбец мобильного телефона «txtMobileNumber», то CSS для Hight света был установлен в качестве фонового цвета: красный;

<span class="AddressLabel">Search Mobile:</span><asp:TextBox ID="txtSearchMobile" 
            runat="server" MaxLength="11" Style="width: 90px !important"></asp:TextBox>&nbsp;&nbsp 
           <asp:Button ID="BtnFindMobile" runat="server" Text="Find" /></p> 


<table cellspacing="0" id="grdvHandSets" style="border-collapse:collapse;"> 
         <tr> 
          <th scope="col">R</th><th scope="col">MobileNumber</th><th scope="col">Type</th><th scope="col">PortingFrom</th><th scope="col">Username</th><th scope="col">Type of use</th><th scope="col">Tariff Name</th><th scope="col">Tariff Code</th><th scope="col">SOC Name</th><th scope="col">SOC Code</th><th scope="col">Contract Term</th><th scope="col">Handset Description</th><th scope="col">Phone Cover</th><th scope="col">PAC Code</th><th scope="col">Con Date</th><th scope="col">X</th> 
         </tr> 
         <tr> 
          <td>     
           <span id="lblRowNumber" class="gvItem">1</span>         
           </td> 
           <td> 
            <input name="ctl00$MainContent$OrderTabs$tbDefaultOrder$grdvHandSets$ctl02$txtMobileNumber" type="text" value="07540167608" maxlength="11" id="txtMobileNumber" class="phonenumber number" /> 
           </td> 
           <td> 
            <select name="ctl00$MainContent$OrderTabs$tbDefaultOrder$grdvHandSets$ctl02$drpType" id="drpType"> 
           <option value=""></option> 
           <option value="1">New</option> 
           <option value="2">Upg</option> 
           <option selected="selected" value="3">Port</option> 
           <option value="4">Migr</option> 
           <option value="5">SOC</option> 

          </select> 
           </td><td> 
            <select name="ctl00$MainContent$OrderTabs$tbDefaultOrder$grdvHandSets$ctl02$drpPortingFrom" id="drpPortingFrom"> 
           <option selected="selected" value=""></option> 
           <option value="Vodafone">Vodafone</option> 
           <option value="O2">O2</option> 
           <option value="Three">Three</option> 
           <option value="Orange">Orange</option> 
           <option value="TMobile">TMobile</option> 
           <option value="Virgin">Virgin</option> 
           <option value="BT">BT</option> 
           <option value="CW">CW</option> 
           <option value="Tesco">Tesco</option> 

          </select> 
           </td><td> 
            <input name="ctl00$MainContent$OrderTabs$tbDefaultOrder$grdvHandSets$ctl02$txtUsername" type="text" value="Jon" maxlength="100" id="txtUsername" class="handsetDetails" /> 
           </td><td> 
            <select name="ctl00$MainContent$OrderTabs$tbDefaultOrder$grdvHandSets$ctl02$drpUseType" id="drpUseType"> 
           <option value=""></option> 
           <option selected="selected" value="1">Indivi</option> 
           <option value="2">Parent</option> 
           <option value="3">Sharer</option> 

          </select> 
           </td><td> 
            <input name="ctl00$MainContent$OrderTabs$tbDefaultOrder$grdvHandSets$ctl02$txtTariffName" type="text" value="one net express" maxlength="100" id="txtTariffName" class="handsetDetails" /> 
           </td><td> 
            <input name="ctl00$MainContent$OrderTabs$tbDefaultOrder$grdvHandSets$ctl02$txtTariffCode" type="text" maxlength="50" id="txtTariffCode" class="handsetDetails" /> 
           </td><td> 
            <input name="ctl00$MainContent$OrderTabs$tbDefaultOrder$grdvHandSets$ctl02$txtSocName" type="text" maxlength="100" id="txtSocName" class="handsetDetails" /> 
           </td><td> 
            <input name="ctl00$MainContent$OrderTabs$tbDefaultOrder$grdvHandSets$ctl02$txtSocCode" type="text" maxlength="50" id="txtSocCode" class="handsetDetails" /> 
           </td><td> 
            <select name="ctl00$MainContent$OrderTabs$tbDefaultOrder$grdvHandSets$ctl02$drpContractTerm" id="drpContractTerm"> 
           <option value=""></option> 
           <option value="60">60m</option> 
           <option selected="selected" value="36">36m</option> 
           <option value="24">24m</option> 
           <option value="18">18m</option> 
           <option value="12">12m</option> 

          </select> 
           </td><td> 
            <input name="ctl00$MainContent$OrderTabs$tbDefaultOrder$grdvHandSets$ctl02$txtHandsetDescription" type="text" value="9300" maxlength="200" id="txtHandsetDescription" class="handsetDetails" /> 
           </td><td> 
            <select name="ctl00$MainContent$OrderTabs$tbDefaultOrder$grdvHandSets$ctl02$drpPhoneCover" id="drpPhoneCover"> 
           <option selected="selected" value=""></option> 
           <option value="SIL">SIL</option> 
           <option value="GLD">GLD</option> 
           <option value="PLT">PLT</option> 
           <option value="DIA">DIA</option> 

          </select> 
           </td><td> 
            <input name="ctl00$MainContent$OrderTabs$tbDefaultOrder$grdvHandSets$ctl02$txtPACCode" type="text" value="tel 683234" maxlength="12" id="txtPACCode" class="handsetDetails" /> 
           </td><td> 
            <input name="ctl00$MainContent$OrderTabs$tbDefaultOrder$grdvHandSets$ctl02$txtConDate" type="text" autocomplete="off" maxlength="10" id="txtConDate" class="date" /> 
           </td><td> 
            <a onclick="javascript:return confirm(&#39;Are you sure you want to delete this handset row 13189&#39;);" id="lnkDelete" href="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$MainContent$OrderTabs$tbDefaultOrder$grdvHandSets$ctl02$lnkDelete&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, true))"> 
            X</a> 
           </td> 
         </tr> 
        </table> 

+0

Сообщение назад отменяется, как я поставил вернуть ложь в конце моей функции, у меня есть идентификатор для HTML таблицы, которая является grdvHandSets, если вы что-то еще? –

+0

$ ('# grdvHandSets td.highlight'). Селектор removeClass ('highlight') выбирает только выделенные 'td's. Вы приковали его с помощью метода .find(), который ничего не может вернуть ... удаление цепочки должно сработать ... – mshsayem

+0

Привет, я пробовал то, что вы сказали, но все же ничего не делает!!?! iv удалено return $ (this) .val() == phonenumber; –

ответ

0

Попробуйте использовать это:

$('#<%= BtnFindMobile.ClientID %>').click(function() { 
      var phonenumber = $('#<%= txtSearchMobile.ClientID %>').val(); 
      $('#grdvHandSets td.highlight').removeClass('highlight'); // Clear existing highlights 
      // Find matching phonenumber fields 
      $('#grdvHandSets td input.phonenumber').filter(function() { 
      return $(this).val() == phonenumber; 
      }). 
      closest('td').addClass('highlight'); // And highlight these cells 
      return false; 
     }); 
+0

Спасибо за то, что он не работает, я хочу изменить цвет текста, но он не работает в настоящий момент, он меняет только фон, но плохо работает спасибо за вашу помощь по этому поводу –

+0

, чтобы изменить цвет, который вам нужен, чтобы использовать стиль цвета в классе .highlight – mshsayem

+0

Да, теперь все отлично работает: D, один быстрый вопрос - это способ, которым я могу изменить JQuery для поиска последнего 5 цифр в столбце мобильного телефона вместо соответствия номеру отверстия? –