您好我拥有包含多个列的html表，通过按Tab键在html table中动态添加行。我想在html表中检查第一个和第二个输入字段是否为空。是否输入字段是空行，不能动态添加。我的问题是验证只适用于第一行，而不适用于动态行。
<form id='students' method='post' id="form1" name='form1' action='index.php'>
<div class="table-responsive" id="nm">
<div align="center">
<b><input type="text" name="total_amt" id="total_amt" value="" maxlength="200" height="130px"; width="200px"; style="font-size:60pt;height:110px;width:600px;" align="center"; /></b>
</div>
<table class="table table-bordered">
<tr>
<th><input class='check_all' type='checkbox' onclick="select_all()"/></th>
<th>S. No</th>
<th>Country Name</th>
<th>Country Number</th>
<th>Country Phone code</th>
<th>Country code</th>
</tr>
<tr>
<td><input type='checkbox' class='case'/></td>
<td><span id='snum'>1.</span></td>
<td><input class="form-control" type='text' id='countryname_1' name='countryname[]' autofocus /></td>
<td class="td_class"><input class="form-control country_no" type='text' id='country_no_1' name='country_no[]'/></td>
<td><input class="form-control" disabled type='text' id='phone_code_1' name='phone_code[]'/></td>
<td><input class="form-control" disabled type='text' id='country_code_1' name='country_code[]'/> </td>
</tr>
</table>
<button type="button" class='btn btn-danger delete'>- Delete</button>
<button type="button" class='btn btn-success addmore'>+ Add More</button>
</div>
</form>
<script type="text/javascript">
$(document).ready(function(){
$(".td_class").on('keyup', '#country_no_1', function(e) {
var icon1 = $('#countryname_1').val();
var keyCode = e.keyCode || e.which;
if (keyCode == 9 ) {
if(icon1 == '' )
{
alert("Please Select an Item");
document.form1.countryname_1.focus();
}
else{
$(".addmore").click();
}
} });
});
</script>
这里添加以下脚本代码：
<script>
$(".delete").on('click', function() {
$('.case:checkbox:checked').parents("tr").remove();
$('.check_all').prop("checked", false);
check();
});
var i=$('table tr').length;
$(".addmore").on('click',function(){
count=$('table tr').length;
var data="<tr><td><input type='checkbox' class='case'/></td><td><span id='snum"+i+"'>"+count+".</span></td>";
data +="<td><input class='form-control' type='text' id='countryname_"+i+"' name='countryname[]'/></td> <td class='td_class'><input class='form-control country_no' type='text' id='country_no_"+i+"' name='country_no[]'/></td><td><input class='form-control' type='text' disabled id='phone_code_"+i+"' name='phone_code[]'/></td><td><input class='form-control' disabled type='text' id='country_code_"+i+"' name='country_code[]'/></td></tr>";
$('table').append(data);
/*test */
$(".td_class").on('keyup', '#country_no_'+i, function(e) {
var keyCode = e.keyCode || e.which;
if (keyCode == 9) {
e.preventDefault();
$(".addmore").click();
}
});
/* test end */
row = i ;
$('#countryname_'+i).autocomplete({
source: function( request, response ) {
$.ajax({
url : 'ajax.php',
dataType: "json",
method: 'post',
data: {
name_startsWith: request.term,
type: 'country_table',
row_num : row
},
success: function( data ) {
response( $.map( data, function( item ) {
var code = item.split("|");
return {
label: code[0],
value: code[0],
data : item
}
}));
}
});
},
autoFocus: true,
minLength: 0,
select: function( event, ui ) {
var names = ui.item.data.split("|");
id_arr = $(this).attr('id');
id = id_arr.split("_");
$('#country_no_'+id[1]).val(names[1]);
$('#phone_code_'+id[1]).val(names[2]);
$('#country_code_'+id[1]).val(names[3]);
}
});
i++;
});
function select_all() {
$('input[class=case]:checkbox').each(function(){
if($('input[class=check_all]:checkbox:checked').length == 0){
$(this).prop("checked", false);
} else {
$(this).prop("checked", true);
}
});
}
function check(){
obj=$('table tr').find('span');
$.each( obj, function( key, value ) {
id=value.id;
$('#'+id).html(key+1);
});
}
$('#countryname_1').autocomplete({
source: function( request, response ) {
$.ajax({
url : 'ajax.php',
dataType: "json",
method: 'post',
data: {
name_startsWith: request.term,
type: 'country_table',
row_num : 1
},
success: function( data ) {
response( $.map( data, function( item ) {
var code = item.split("|");
return {
label: code[0],
value: code[0],
data : item
}
}));
}
});
},
autoFocus: true,
minLength: 0,
select: function( event, ui ) {
var names = ui.item.data.split("|");
$('#country_no_1').val(names[1]);
$('#phone_code_1').val(names[2]);
$('#country_code_1').val(names[3]);
}
});
$('#country_code_1').autocomplete({
source: function( request, response ) {
$.ajax({
url : 'ajax.php',
dataType: "json",
method: 'post',
data: {
name_startsWith: request.term,
type: 'country_code',
row_num : 1
},
success: function( data ) {
response( $.map( data, function( item ) {
var code = item.split("|");
return {
label: code[3],
value: code[3],
data : item
}
}));
}
});
},
autoFocus: true,
minLength: 0,
select: function( event, ui ) {
var names = ui.item.data.split("|");
$('#country_no_1').val(names[1]);
$('#phone_code_1').val(names[2]);
$('#countryname_1').val(names[0]);
},
open: function() {
$( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
},
close: function() {
$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
}
});
</script>
帮助我@Thanks