关于更改input样式和获取值的问题

Question

htmlcssjsclass

Answer 1

<script src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script>
  <tr>
    <td width="14%" height="40" align="right" nowrap=""><span lang="zh-cn">请选择红球号码：</span></td>
    <td width="100%" height="40"><input type="text" style="width:100%" name="sjb"  ></td>
  </tr>
  <tr>
    <td height="40" align="right" nowrap="">请选择篮球号码：</td>
    <td width="100%" height="40"><input type="text" style="width:100%" name="stb"  ></td>
  </tr>
  <tr>
    <td height="40" colspan="5" align="center" class="shuzi"><span class="red" ><strong>红球号码选择区：</strong></span></td>
  </tr>
  <tr>
    <td height="40" class="shuzi">&nbsp;</td>
    <td height="40" colspan="4" class="shuzi">
      <input type="button" value="01" name="num">
      <input type="button" value="02" name="num">
      <input type="button" value="03" name="num">
      <input type="button" value="04" name="num">
      <input type="button" value="05" name="num">
      <input type="button" value="06" name="num">
      <input type="button" value="07" name="num">
      <input type="button" value="08" name="num">
      <input type="button" value="09" name="num">
      <input type="button" value="10" name="num">
      <input type="button" value="11" name="num">
      <input type="button" value="12" name="num">
      <input type="button" value="13" name="num">
      <input type="button" value="14" name="num">
      <input type="button" value="15" name="num"></td>
  </tr>  <tr>
    <td height="40" colspan="5" align="center" class="shuzi"><span class="blue"><strong>蓝色球选择区：</strong></span></td>
  </tr>
  <tr>
    <td height="40" class="shuzi lan">&nbsp;</td>
    <td height="40" colspan="4" align="center" class="shuzi lan">
      <input type="button" value="01" name="bnum">
      <input type="button" value="02" name="bnum">
      <input type="button" value="03" name="bnum">
      <input type="button" value="04" name="bnum">
      <input type="button" value="05" name="bnum">
      <input type="button" value="06" name="bnum">
      <input type="button" value="07" name="bnum">
      <input type="button" value="08" name="bnum">
      <input type="button" value="09" name="bnum">
      <input type="button" value="10" name="bnum">
      <input type="button" value="11" name="bnum">
      <input type="button" value="12" name="bnum">
      <input type="button" value="13" name="bnum">
      <input type="button" value="14" name="bnum">
      <input type="button" value="15" name="bnum">
      <input type="button" value="16" name="bnum"></td>
  </tr>
<script>$('input[name=bnum]').click(function(){
  $('input[name=bnum]').css('background','#D3DBC4');
  var d=$('input[name=stb]');
  if(d.val()==this.value){d.val('');return;}
  d.val($(this).css('background','red').val());
});
  $('input[name=num]').click(function(){
  $('input[name=num]').css('background','#D3DBC4');
  var d=$('input[name=sjb]');
  if(d.val()==this.value){d.val('');return;}
  d.val($(this).css('background','red').val());
});
</script>

Answer 2

<script src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script>
  <tr>
    <td width="14%" height="40" align="right" nowrap=""><span lang="zh-cn">请选择红球号码：</span></td>
    <td width="100%" height="40"><input disabled type="text" style="width:100%" name="sjb"  ></td>
  </tr>
  <tr>
    <td height="40" align="right" nowrap="">请选择篮球号码：</td>
    <td width="100%" height="40"><input disabled type="text" style="width:100%" name="stb"  ></td>
  </tr>
  <tr>
    <td height="40" colspan="5" align="center" class="shuzi"><span class="red" ><strong>红球号码选择区：</strong></span></td>
  </tr>
  <tr>
    <td height="40" class="shuzi">&nbsp;</td>
    <td height="40" colspan="4" class="shuzi">
      <input type="button" value="01" name="num">
      <input type="button" value="02" name="num">
      <input type="button" value="03" name="num">
      <input type="button" value="04" name="num">
      <input type="button" value="05" name="num">
      <input type="button" value="06" name="num">
      <input type="button" value="07" name="num">
      <input type="button" value="08" name="num">
      <input type="button" value="09" name="num">
      <input type="button" value="10" name="num">
      <input type="button" value="11" name="num">
      <input type="button" value="12" name="num">
      <input type="button" value="13" name="num">
      <input type="button" value="14" name="num">
      <input type="button" value="15" name="num"></td>
  </tr>
 
  <tr>
    <td height="40" colspan="5" align="center" class="shuzi"><span class="blue"><strong>蓝色球选择区：</strong></span></td>
  </tr>
  <tr>
    <td height="40" class="shuzi lan">&nbsp;</td>
    <td height="40" colspan="4" align="center" class="shuzi lan">
      <input type="button" value="01" name="bnum">
      <input type="button" value="02" name="bnum">
      <input type="button" value="03" name="bnum">
      <input type="button" value="04" name="bnum">
      <input type="button" value="05" name="bnum">
      <input type="button" value="06" name="bnum">
      <input type="button" value="07" name="bnum">
      <input type="button" value="08" name="bnum">
      <input type="button" value="09" name="bnum">
      <input type="button" value="10" name="bnum">
      <input type="button" value="11" name="bnum">
      <input type="button" value="12" name="bnum">
      <input type="button" value="13" name="bnum">
      <input type="button" value="14" name="bnum">
      <input type="button" value="15" name="bnum">
      <input type="button" value="16" name="bnum"></td>
  </tr>
<script>$('input[name=bnum]').click(function(){
  $('input[name=bnum]').css('background','#D3DBC4');
  var d=$('input[name=stb]');
  if(d.val()==this.value){d.val('');return;}
  d.val($(this).css('background','red').val());
});
  $('input[name=num]').click(function(){
  var d=$('input[name=sjb]');
  var v=d.val()?d.val().split(','):[];
  if(v.length==6&&v.indexOf(this.value)==-1)return;
  $('input[name=num]').css('background','#D3DBC4');
  var r=[];
  for(var i=0;i<v.length;i++){
    if(this.value==v[i])continue;
    r.push(v[i]);
    $('input[name=num][value='+v[i]+']').css('background','red')
  }
   if(v.indexOf(this.value)==-1)r.push(this.value),$(this).css('background','red');
  d.val(r.join(','));
});
</script>