我有这样的表格结构......
<table class="table table-bordered table-striped table-hover js-basic-example dataTable" cellspacing="0" rules="all" border="1" id="Gridview1" style="font-size: Small; border-collapse: collapse;">
<tr>
<th scope="col">No</th>
<th scope="col" style="width: 80px;"> </th>
<th scope="col">Sparepart</th>
<th scope="col">Qty</th>
<th scope="col">Hrg. Jual Std</th>
<th scope="col">Hrg. Jual Gold</th>
<th scope="col">Hrg. Jual Gold HD</th>
<th scope="col">Hrg. Beli Std</th>
<th scope="col">Hrg. Beli Gold</th>
<th scope="col" style="font-size: Small; width: 150px;">Hrg. Beli Gold HD</th>
</tr>
<tr>
<td class="count">1</td>
<td>
<input type="image" name="Gridview1$ctl02$BTSHOWSPAREPART" id="Gridview1_BTSHOWSPAREPART_0" title="Browse Sparepart" class="icon icons8-Search" data-toggle="modal" data-target="#divSparepart" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAACdklEQVRogd1Zy5HDIAx1CS4hR0gulOASUoJLSAnqICWkhBwJXCjBJbgEl7B7WGVsE2EbEE6ymuEq9IT09KGqIkSBqwXoRoAGCdZJMJ0EM+DpJJi7BHOVYM4xeovLCaw6gr2hoT8R5y5AH95muAJXo0djDffPdXcgAnTDYPj0DAJ0s4vxEh6XBeN79GhzAqsUuFqBq09glQRz/ssP04eBPC57GE9cbF1McuILkkAE6LaI8ehF3/ODhMdFgatTdIYcwh5OAvSBNj6fEgP5NLAmNrKN7yk2PkcQLzTLpZzwPn+yCdCtD+IEVmUrxgo6VdylxvyGuzrWV8BiNfN+Sb5Gopi9QpazJJiz731Ge0N39p7D2hxlfvJe+UzdducR7C1HmR//xTvJ11e3LkfZLKlYWGFFMO9mNSFZGRGPBz5TaeEGMGOgUvRJ3DtjohxFu4cQFs5Zh5usDLvMXWrAU4hakE7d76BRnBnYaNQvZOkJtfnO+atnUTfBCEXDiOpKs5kPNw48SbUihPfzW2qCFYq009R0xvbaxCuwhlJgXOUZaKqKzgXJtApB43tfN3vNCYx9WeG0sKIp07aH1yqmi/EYOsOfvryT0YWuXA5Ll0pcbD3pD5e+h3Hxu2b4PiAC4ZR8hjCwEQRrMznZSmcab90z/Ig6MHlZ6yZA+QYrZBF/ctvg8dHwqYRBvNB4ywZivNycJZgrGtGPxpoePXcXoNu1UHgrCC75ehAxYfmRIGTkB8rHgZCLHyFfAIJa9n4diIXW5f+DYC12uZIIovj8HiUJID4LQFVFg+Cb6DhlK4jdPs5TZAOI4gu4bAmAGIr/9nMKFrteBtrzX7F94LF7v0MpAAAAAElFTkSuQmCC" onclick="return false;" style="height: 28px; width: 28px;" />
<input type="image" name="Gridview1$ctl02$BTDELETESPAREPART" id="Gridview1_BTDELETESPAREPART_0" title="Hapus baris yang dipilih" class="icon icons8-Trash-Can" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAABOUlEQVRIic2Wy7GFIAyGTwmW4FINC5aEFSVYgiVYgh1YgiVQQmIFlmAJluBdyHgfRxHQOXOZ+RcyJh8hAfJ6XQwyMmMEYoT1SCNCf+UjaJAqcud0Yg3DL7n5R0FHK2eE6XEQaxhIg9y1zaeDyMiMlDCkqs45Ws7y80Mzo7AjQk9Y1kEgX+Ij5I/SVdhdyMoIK6kivwJND4AWMjK7zhNCyyjstvfhzhmFJYQ2CHIIVkW+FYgwhGVNWNb7twZ5w3HVeff4zM7IjFTVBRv8KenZ5Y1ONLl/dpsYUExu3nIVA7pTeXMM6M6hDb+SPggS9gaIwkHfb02ChA0GjQh9MkjD8P9A7i1KAkX1ENulmgaKuoJIQZMMQmgjIirr9IigCQdd9HK+M5T0ZBCWtatA4uMmZWGEiVFYUtD4IF+DOu6rvwbudgAAAABJRU5ErkJggg==" onclick="return false;" style="height: 28px; width: 28px;" />
</td>
<td>
<span id="Gridview1_TXTINFOSPAREPART_0" class="InputSparepart" style="font-size: Small;"></span>
</td>
<td>
<div id="Gridview1_valQty_0" class="form-group default">
<div class="col-sm-10">
<input name="Gridview1$ctl02$TextBox2" type="text" id="Gridview1_TextBox2_0" class="form-control InputQty" style="font-size: Small;" />
<span id="LBINFOQty" style="font-size: x-small" class="help-block spanDefault"></span>
</div>
</div>
</td>
<td>
<div id="Gridview1_valJualSTD_0" class="form-group default">
<div class="col-sm-10">
<input name="Gridview1$ctl02$TextBox3" type="text" id="Gridview1_TextBox3_0" class="form-control InputJualStd" style="font-size: Small;" />
<span id="LBINFOJualSTD" class="help-block spanDefault"></span>
</div>
</div>
</td>
<td>
<div id="Gridview1_valJual_Gold_0" class="form-group default">
<div class="col-sm-10">
<input name="Gridview1$ctl02$TextBox4" type="text" id="Gridview1_TextBox4_0" class="form-control InputJualGold" style="font-size: Small;" />
<span id="LBINFOJualGold" class="help-block spanDefault"></span>
</div>
</div>
</td>
<td>
<div id="Gridview1_valJualGold_HD_0" class="form-group default">
<div class="col-sm-10">
<input name="Gridview1$ctl02$TextBox5" type="text" id="Gridview1_TextBox5_0" class="form-control InputJualGold_HD" style="font-size: Small;" />
<span id="LBINFOJual_GoldHD" class="help-block spanDefault"></span>
</div>
</div>
</td>
<td>
<div id="Gridview1_valBeliSTD_0" class="form-group default">
<div class="col-sm-10">
<input name="Gridview1$ctl02$TextBox6" type="text" id="Gridview1_TextBox6_0" class="form-control InputBeliStd" style="font-size: Small;" />
<span id="LBINFOBeliSTD" class="help-block spanDefault"></span>
</div>
</div>
</td>
<td>
<div id="Gridview1_valBeli_Gold_0" class="form-group default">
<div class="col-sm-10">
<input name="Gridview1$ctl02$TextBox7" type="text" id="Gridview1_TextBox7_0" class="form-control InputBeliGold" style="font-size: Small;" />
<span id="LBINFOBeliGold" class="help-block spanDefault"></span>
</div>
</div>
</td>
<td>
<div id="Gridview1_valBeliGold_HD_0" class="form-group default">
<div class="col-sm-10">
<input name="Gridview1$ctl02$TextBox8" type="text" id="Gridview1_TextBox8_0" class="form-control InputBeliGold_HD" style="font-size: Small;" />
<span id="LBINFO_BeliGold_HD" class="help-block spanDefault"></span>
</div>
</div>
</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td align="right">
<input type="submit" name="Gridview1$ctl03$ButtonAdd" value="Tambah" onclick="return false;" id="Gridview1_ButtonAdd" class="btn btn-primary" style="font-size: X-Small;" />
<input type="submit" name="Gridview1$ctl03$ButtonCancel" value="Batal" id="Gridview1_ButtonCancel" class="btn btn-danger" style="font-size: X-Small;" />
</td>
</tr>
</table>
基于这种结构,我希望每个输入文本,如果用户输入退格并清除文本框,它将显示警告他们是焦点输入,到目前为止,我要去要做:
$("body").on("keyup", "[id*=Gridview1] input[type=text]", function () {
if (!this.value) {
$(this).closest("tr").find("[id*=LBINFOJualGold]").text('Numeric only please!!!');
$(this).closest("tr").find("[id*=valJual_Gold]").removeClass('form-group');
$(this).closest("tr").find("[id*=valJual_Gold]").addClass('form-group has-error');
$(this).closest("tr").find("[id*=LBINFOJualGold]").removeClass('help-block');
$(this).closest("tr").find("[id*=LBINFOJualGold]").addClass('help-block spanDefault');
}
});