我正在努力让这个Jquery突出显示在我当前的项目中工作,我有一个文本框,当用户在点击按钮时输入他们想要的手机号码我是Jquery突出显示所有符合用户输入条件的手机号码,但是对于某些原因,它似乎不起作用,也不会引发错误?!?!有谁可以帮助我吗。
$('#<%= 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;
});
继续html表及其第二个TD我想引用手机专栏“txtMobileNumber”,高亮灯的CSS已被设置为背景颜色:红色;
<span class="AddressLabel">Search Mobile:</span><asp:TextBox ID="txtSearchMobile"
runat="server" MaxLength="11" Style="width: 90px !important"></asp:TextBox>  
<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('Are you sure you want to delete this handset row 13189');" id="lnkDelete" href="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$MainContent$OrderTabs$tbDefaultOrder$grdvHandSets$ctl02$lnkDelete", "", true, "", "", false, true))">
X</a>
</td>
</tr>
</table>
<span class="AddressLabel">Search Mobile:</span><asp:TextBox ID="txtSearchMobile"
runat="server" MaxLength="11" Style="width: 90px !important"></asp:TextBox>  
<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('Are you sure you want to delete this handset row 13189');" id="lnkDelete" href="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$MainContent$OrderTabs$tbDefaultOrder$grdvHandSets$ctl02$lnkDelete", "", true, "", "", false, true))">
X</a>
</td>
</tr>
</table>
答案 0 :(得分: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;
});