$(function(){
$("#PCBSNInput,#TSNInput,#FSNInput,#MACInput").keyup(function(e){
if(e.key== "Enter"){
if(getNextInputId().length>0){
$("#"+getNextInputId()).focus()
}
else{
//post提交数据
}
}
});
})
function SNCheck(idStr){
if($("#"+idStr).prop("checked")){
$("#"+idStr+"Input").removeAttr("disabled");
}
else{
$("#"+idStr+"Input").attr("disabled","disenabled");
}
}
function getNextInputId()
{
if($("#PCBSN").prop("checked") && $("#PCBSNInput").val()=="")
return "PCBSNInput";
if($("#TSN").prop("checked") && $("#TSNInput").val() == "")
return "TSNInput";
if($("#FSN").prop("checked") && $("#FSNInput").val() == "")
return "FSNInput";
if($("#MAC").prop("checked") && $("#MACInput").val() == "")
return "MACInput";
return "";
}
<div class="ui grid">
<div class="twelve wide column">
<table style="width:100%;height:100%;">
<tr>
<td>
<table class="BindSNInputTable">
<tr>
<td>
PCB SN:
</td>
<td>
<div class="ui input">
<input type="text" id="PCBSNInput" disabled>
</div>
</td>
<td>
<div class="ui checkbox" onclick="SNCheck('PCBSN')">
<input type="checkbox" id="PCBSN">
<label></label>
</div>
</td>
</tr>
<tr>
<td>
临时SN:
</td>
<td>
<div class="ui input">
<input type="text" id="TSNInput" disabled>
</div>
</td>
<td>
<div class="ui checkbox" onclick="SNCheck('TSN')">
<input type="checkbox" id="TSN">
<label></label>
</div>
</td>
</tr>
<tr>
<td>
Fanvil SN:
</td>
<td>
<div class="ui input">
<input type="text" id="FSNInput" disabled>
</div>
</td>
<td>
<div class="ui checkbox" onclick="SNCheck('FSN')">
<input type="checkbox" id="FSN">
<label></label>
</div>
</td>
</tr>
<tr>
<td>
MAC:
</td>
<td>
<div class="ui input">
<input type="text" id="MACInput" disabled>
</div>
</td>
<td>
<div class="ui checkbox" onclick="SNCheck('MAC')">
<input type="checkbox" id="MAC">
<label></label>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr class="infoShowTr">
<td>
<div class="InfoShowDiv">
<h1 style="color:#55a">已绑定的SN信息:</h1>
<table class="ui mini selectable striped table">
<thead>
<tr>
<th>PCB SN</th>
<th>临时SN</th>
<th>Fanvil SN</th>
<th>MAC</th>
</tr>
</thead>
<tbody style="overflow-x: hidden; overflow-y: auto;">
<tr>
<td>PCBSN0001</td>
<td>TSN00001</td>
<td>FSN00001</td>
<td>000102030405</td>
</tr>
<tr>
<td>PCBSN0001</td>
<td>TSN00001</td>
<td>FSN00001</td>
<td>000102030405</td>
</tr>
<tr>
<td>PCBSN0001</td>
<td>TSN00001</td>
<td>FSN00001</td>
<td>000102030405</td>
</tr>
<tr>
<td>PCBSN0001</td>
<td>TSN00001</td>
<td>FSN00001</td>
<td>000102030405</td>
</tr>
<tr>
<td>PCBSN0001</td>
<td>TSN00001</td>
<td>FSN00001</td>
<td>000102030405</td>
</tr>
<tr>
<td>PCBSN0001</td>
<td>TSN00001</td>
<td>FSN00001</td>
<td>000102030405</td>
</tr>
<tr>
<td>PCBSN0001</td>
<td>TSN00001</td>
<td>FSN00001</td>
<td>000102030405</td>
</tr>
<tr>
<td>PCBSN0001</td>
<td>TSN00001</td>
<td>FSN00001</td>
<td>000102030405</td>
</tr>
<tr>
<td>PCBSN0001</td>
<td>TSN00001</td>
<td>FSN00001</td>
<td>000102030405</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</table>
</div>
<div class="four wide column">
<table class="ui very basic table" style="font-size:16px;">
<tbody>
<tr>
<td>组装段服务器</td>
<td>192.168.1.2</td>
</tr>
<tr>
<td>组装段订单</td>
<td>SC00001</td>
</tr>
<tr>
<td>组装段站位</td>
<td>Test01</td>
</tr>
</tbody>
</table>
组装段信息在系统设置中修改。
</div>
</div>
.ui.grid{
height: 100%;
}
.column{
border: 1px solid red;
}
.BindSNInputTable{
padding-left: 30%;
}
.BindSNInputTable tr{
height: 20px;
}
.BindSNInputTable input{
width: 240px;
font-size: 16px;
padding: 0px;
}
.infoShowTr{
height: 100%;
}
.InfoShow{
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
background-color: #fafafa
}
.selectable.table td{
padding: 5px;
}