js做了一个输入框,后面带加减号

lanzhusiyu

2016-12-23

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>afinder</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
</head>
<body >
	<table style="border:2px solid 	#B3B3B3;background-color:white;">
      <tr>
           <td rowspan=2 style="border:0px solid black;text-align:center;height:24px;width: 30px;">
		      <input id="txt" type="text" style="width: 14px; height: 24px;border:0px solid black;background-color:white;" value="1" />		    
		   </td>
		   <td style="border:1px solid #B4CDCD;background-color:#f0f0f0;text-align:center;width:15px;height:12px;">
		     <a href="#" onclick="add()"  style="height: 12px; text-align: center;color:black;text-decoration:none;"> + </a>
		   </td>
     </tr>
     <tr>
           <td style="border:1px solid #B4CDCD;background-color:#f0f0f0;text-align:center;width:15px;height:12px;">
		     <a href="#" onclick="sub()"   style="height: 12px; text-align: center;;color:black;text-decoration:none;"> - </a>
		   </td>
     </tr>
    </table>
	
	
	<table style="border:2px solid 	#B3B3B3;background-color:white;margin-top:100px;">
	  <tr>
	    <td style="border:1px solid #B4CDCD;background-color:#f0f0f0;text-align:center;width:15px;height:12px;">
		 <a href="#" onclick="sub2()"   style="height: 12px; text-align: center;color:black;text-decoration:none;"> - </a>
		</td>
	    <td>
		  <input id="txt2" type="text" style="width: 14px; height: 24px;border:0px solid black;background-color:white;" value="1" />	
		</td>
		<td style="border:1px solid #B4CDCD;background-color:#f0f0f0;text-align:center;width:15px;height:12px;">
		   <a href="#" onclick="add2()"  style="height: 12px; text-align: center;color:black;text-decoration:none;"> + </a>
		</td>
			  
	  </tr>
    </table>
	<script>
	var a = 1; 

    function add() { 

        a++; 

        document.getElementById("txt").value = a; 

    } 

    function sub() { 

        a--; 

        document.getElementById("txt").value = a; 

    }
	
	
	 function add2() { 

        a++; 

        document.getElementById("txt2").value = a; 

    } 

    function sub2() { 

        a--; 

        document.getElementById("txt2").value = a; 

    }
	
	</script>
</body>

</html>

最近需要找到一个这样的插件，结果没找到，最后在百度知道上发现了一个例子，于是修改了一下样式，感觉还行，共享一下。
js做了一个输入框,后面带加减号