这么多天来我一直遇到一个特殊的问题。如果用户不小心/有意从文本框中删除了内容,并且新值不符合所需条件,我想关注内部的输入文本框。 我的HTMl是:
<div id="entryTbl">
<table id = "usrdetails" border="1px" cellpadding="15px" align="center">
<thead>
<tr>
<th>ENTRY NO</th>
<th>USER ID</th>
<th>USER NAME</th>
<th>AGE</th>
<th>BLOOD GROUP</th>
<th>BLOOD TRANSACTION TYPE</th>
<th>QTY</th>
<th>LAST DONATION DATE</th>
<th>TRANS DATE</th>
<th>TRANS REASON</th>
</tr>
</thead>
<tbody>
<tr>
<td><label id="row10"><%=recordNo%></label></td>
<td><input type="text" name="userid" id="row11" class="useridIn"/></td>
<td><label id="row12" class="fullname"></label></td>
<td><label id="row13" class="age"></label></td>
<td><label id="row14" class="bloodgp"></label></td>
<td><select id="row15" class="trans_opt" disabled>
<option>---select a value---</option>
<option value="Debit">D</option>
<option value="Credit">C</option>
</select>
</td>
<td><input type="text" name="trans_qty" id="row16" class = "trans_qty" disabled/></td>
<td><label id="row17"></label></td>
<td><input type="text" name="currtransdate" id="row18" class="curDate" disabled/></td>
<td><input type="text" name="currtransreason" id="row19" class="trnReason" disabled/></td>
</tr>
</tbody>
</table>
</div>
我写的JQuery脚本是:
<script type="text/javascript">
window.onload = function() {
document.getElementById("row11").focus();
};
</script>
<script type="text/javascript">
$(document).ready(function(){
var rowno = "";
$("#recfrmdate").focusin(function(){
//rowno++;
alert(rowno);
//var cont =$('#usrdetails tr:eq('+parseInt(rowno)+') td:eq(1) input').val();
//var cont = $('#usrdetails').children('tr:eq(rowno)').children('td:eq(1)').children().val();
var cont = $("#usrdetails tr:eq(0) td:eq(1) input[type = 'text']").val();
alert(cont);
});
$("#usrdetails").on("change",".useridIn",function(event){
var $this = $(this);
var i = $this.val();
var i_len = $this.val().length;
var row1 = $this.closest('tr').children('td:eq(5)').children();
//alert(i_len);
//var row = $(this).closest('tr');
if (i_len != 7)
{
//alert("It is someting else");
//row1.val('');
row1.prop('selectedIndex', 0);
row1.prop('disabled', true);
$this.closest('tr').children('td:eq(6)').children().val('');
$this.closest('tr').children('td:eq(6)').children().prop('disabled', true);
$this.closest('tr').children('td:eq(8)').children().val('');
$this.closest('tr').children('td:eq(8)').children().prop('disabled', true);
rowno = $this.closest('tr').index();
$("#recfrmdate").focus();
//alert(rowno);
//$this.prev().focus();
//$this.closest('tr').children('td:eq(1)').children().focus();
}
else
{
//alert("It is exact SEVEN");
row1.prop('disabled', false);
//$("#recfrmdate").focus();
row1.focus();
//$this.next().focus();
}
});
$("#usrdetails").on("change",".trans_opt",function(event){
var $this = $(this);
if ($this.val() != "")
{
$this.closest('tr').children('td:eq(6)').children().prop('disabled', false);
$this.closest('tr').children('td:eq(6)').children().focus();
}
else
{
$this.closest('tr').children('td:eq(6)').children().prop('disabled', true);
}
});
$("#usrdetails").on("change",".trans_qty",function(event){
var $this = $(this);
if ($this.val() != "")
{
$this.closest('tr').children('td:eq(8)').children().prop('disabled', false);
$this.closest('tr').children('td:eq(8)').children().focus();
}
else
{
$this.closest('tr').children('td:eq(8)').children().prop('disabled', true);
}
});
$("#usrdetails").on("change",".curDate",function(event){
var $this = $(this);
if ($this.val() != "")
{
$this.closest('tr').children('td:eq(9)').children().prop('disabled', false);
$this.closest('tr').children('td:eq(9)').children().focus();
}
else
{
$this.closest('tr').children('td:eq(8)').children().prop('disabled', true);
//$this.focus();
}
});
$("#usrdetails").on("blur",".trnReason",function(event){
var $this = $(this);
if ($this.val() != "")
{
//$this.closest('tr').children('td:eq()').children().prop('disabled', false);
//$this.closest('tr').children('td:eq(9)').children().focus();
}
else
{
//$this.closest('tr').children('td:eq(8)').children().prop('disabled', true);
$this.closest('tr').children('td:eq(9)').children().focus();
}
});
});
</script>
脚本的第一部分将加载页面,并将焦点放在id ='row11'的输入框“ UserID”上,所有其他元素均被停用。获得正确的UserID值(即字符长度等于7)后,我会在“更改”事件中激活下一个下拉框。进一步在此下拉框的更改事件中,我激活下一个具有类“ trans_qty”的输入框,依此类推。 现在,假设用户更改了“ UserId”,并且新条目的字符长度不等于7,则应清除下拉框和其他输入文本框值并将其禁用,并应将注意力集中在USERID文本框上。通过使用DOM遍历的.focus()方法,它不会获得焦点。因此,我想改为使用#id将焦点放在顶部的日期文本框中,将行索引发送到公共变量“ rowno”,然后在Date输入文本框的focusin()事件中,我应该捕获UserID的值文本框,如果已捕获,则应将它放在focus()上。 我能够以警报的形式获取行索引,但无法获取UserID文本框的值。我已经尝试了DOM遍历的所有可能组合,这在我的脚本中可以看到,但是徒劳。我非常受够了。请帮助。