如果条件不是验证我的值

Question

我正在尝试(单击GET)获取不等于null的值，然后将行附加到最终的表中，但首先它对空值采用true。如何修复它？

​

$(document).ready(function(){
 var a='';
 var b='';
 var c='';
 var d='';
 $('#getrow').click(function(){
 a = $('#empname').val();
 b = $('#age option:selected').val();
 c = $('#gender option:selected').val();
 d = $('#salary option:selected').val();

 if(a!=null && b!=null && c!=null && d!=null ){
  alert('Passed');
  //alert(a+" "+b+" "+c+" "+d);
   $('#final').append('<tr height=\"25\"><td>'+a+'</td><td>'+b+'</td><td>'+c+'</td><td>'+d+'</td></tr>');

  $('#empname').val(' ');
  $('#age').val(' ');
  $('#gender').val(' ');
  $('#salary').val(' ');
 }
  else{
  alert('Failed');
  }
 

 });
 });

table,tr,th,td{
      border:1px solid #dddddd;
      border-collapse:collapse;
    }
	.td-bg{
	background:#006597;
	color:#fff;
	opacity:0.7;
	cursor:pointer;
	}
	.block-header{
	background:#006597;
	color:#fff;
	
	}
	.block-header th{
	text-align:center;
	}
	.active{
	background:#006597;
	color:#fff;
	}
	.addrow{
	width:10%;
	height:100px;
	background:#006597;
	float:left;
	text-align:center;
	color:#fff;
	line-height:100px;
	cursor:pointer;
	 word-wrap: break-word;
	 overflow:hidden;
	}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width:45%; float:left;" id="table-txt">
      <tr height="25" class="block-header">
        <th width="25%">Name</th>
        <th width="25%">Age</th>
        <th width="25%">Gender</th>
        <th width="25%">Salary</th>
      </tr>
      <tr height="25">
        <td><input type="text" style="width:100%;" id="empname" placeholder="EMP Name"/></td>
        <td><select style="width:100%;" id="age"><option disabled selected>Select Age</option><option>20+</option></select></td>
        <td><select style="width:100%;" id="gender"><option disabled selected>Select Gender</option><option>Male</option><option>Female</option></select></td>
        <td><select style="width:100%;" id="salary"><option disabled selected>Select Salary</option><option>4LPM+</option><option>5LPM+</option></select></td>
      </tr>
       </table>
	  <div class="addrow" id="getrow">GET RECORD</div>
	  <table style="width:45%; float:right;" id="final">
      <tr height="25" class="block-header">
        <th width="25%">Name</th>
        <th width="25%">Age</th>
        <th width="25%">Gender</th>
        <th width="25%">Salary</th>
      </tr>

      
      
      </table>

​

Answer 1

从a!=nul更改为

if (a.trim()) {
    // is not empty or whitespace
}

​

$(document).ready(function(){
 var a='';
 var b='';
 var c='';
 var d='';
 $('#getrow').click(function(){
 a = $('#empname').val();
 b = $('#age option:selected').val();
 c = $('#gender option:selected').val();
 d = $('#salary option:selected').val();

 if(a.trim() && b.trim() && c.trim() && d.trim()){
  alert('Passed');
  //alert(a+" "+b+" "+c+" "+d);
   $('#final').append('<tr height=\"25\"><td>'+a+'</td><td>'+b+'</td><td>'+c+'</td><td>'+d+'</td></tr>');

  $('#empname').val(' ');
  $('#age').val(' ');
  $('#gender').val(' ');
  $('#salary').val(' ');
 }
  else{
  alert('Failed');
  }
 

 });
 });

table,tr,th,td{
      border:1px solid #dddddd;
      border-collapse:collapse;
    }
	.td-bg{
	background:#006597;
	color:#fff;
	opacity:0.7;
	cursor:pointer;
	}
	.block-header{
	background:#006597;
	color:#fff;
	
	}
	.block-header th{
	text-align:center;
	}
	.active{
	background:#006597;
	color:#fff;
	}
	.addrow{
	width:10%;
	height:100px;
	background:#006597;
	float:left;
	text-align:center;
	color:#fff;
	line-height:100px;
	cursor:pointer;
	 word-wrap: break-word;
	 overflow:hidden;
	}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width:45%; float:left;" id="table-txt">
      <tr height="25" class="block-header">
        <th width="25%">Name</th>
        <th width="25%">Age</th>
        <th width="25%">Gender</th>
        <th width="25%">Salary</th>
      </tr>
      <tr height="25">
        <td><input type="text" style="width:100%;" id="empname" placeholder="EMP Name"/></td>
        <td><select style="width:100%;" id="age"><option disabled value='' selected>Select Age</option><option>20+</option></select></td>
        <td><select style="width:100%;" id="gender"><option disabled  value='' selected>Select Gender</option><option>Male</option><option>Female</option></select></td>
        <td><select style="width:100%;" id="salary"><option disabled  value='' selected>Select Salary</option><option>4LPM+</option><option>5LPM+</option></select></td>
      </tr>
       </table>
	  <div class="addrow" id="getrow">GET RECORD</div>
	  <table style="width:45%; float:right;" id="final">
      <tr height="25" class="block-header">
        <th width="25%">Name</th>
        <th width="25%">Age</th>
        <th width="25%">Gender</th>
        <th width="25%">Salary</th>
      </tr>

      
      
      </table>

​