JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/4.0.0-alpha.5/css/bootstrap-flex.css">
<div class="container">
<h3>input change事件演示</h3>
<table id="table" class="table table-bordered">
<thead>
<tr>
<th>指标</th>
<th>杨树</th>
<th>柳树</th>
<th>橡树</th>
<th>桃树</th>
<th>松树</th>
</tr>
</thead>
<tbody>
<tr>
<td>年初存量</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>存量增加</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>存量减少</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
</tr><tr>
<td>年末存量</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
</tr>
</tbody>
</table>
</div>
CSS
.table thead{
background: #123;
color:#fff;
}
.table thead th{
text-align:center;
}
.table input{
width:80px;
}
JavaScript
$(function(){
$('#table input').map(function(){
$(this).change(function(){
var pattern = /^-?\d+\.?\d*$/;// 验证实数
if(!pattern.test(this.value)){
this.style.color = '#f00';
}else{
this.style.color = '#000';
}
});
})
});