【发布时间】：2015-11-23 13:13:47
【问题描述】：
我有一个 html 表，在该表中我有一个包含文本框的列。当我单击开始选择时，它将专注于第一个文本框并在其后插入一个“下一步”按钮。当用户填写输入然后点击下一步时，我希望它隐藏该按钮并专注于下一个输入并在该输入之后插入一个“下一步”按钮。
我还想添加一个 Prev 按钮来备份输入，并且如果用户碰巧专注于其他输入之一，它将从最后一个焦点输入中删除下一个/上一个按钮并添加下一个/prev 按钮指向新聚焦的输入。
这是我迄今为止尝试过的：
function ScrollTo(Element_ID_or_Class) {
$('html, body').animate({
scrollTop: $(Element_ID_or_Class).offset().top - 120
}, 1000);
}
//finish pick start
$(document).on('click', '#cancelpick', function() {
$(this).attr('id', 'pick');
$(this).removeClass('btn-danger').addClass('btn-success').html(' <i class="zmdi zmdi-case-play m-r-5"></i>Start Picking');;
$('.Picking_TD').each(function() {
var val = $(this).find('.txt_Picking_Vals').val();
$(this).html(val);
});
$('.lblPicked').hide();
});
//finish pick end
//start picking start
var FocusedInput = '';
$(document).on('click', '#pick', function() {
$(this).attr('id', 'cancelpick');
$(this).removeClass('btn-success').addClass('btn-danger').html('<i class="zmdi zmdi-case-download m-r-5"></i>Finish Picking');
var i = 0;
$('.Picking_TD').each(function() {
$(this).css('padding-top', '0').css('padding-bottom', '0');
var DataID = $(this).data('id');
var html = $(this).html();
var input = $('<div class="fg-line">\
<input type="number" tabindex="' + i+++'" class="txt_Picking_Vals form-control fg-input" data-id="' + DataID + '" value="' + $.trim(html) + '" style="text-align:center; background-color:lightyellow;width:50px;"/>\
</div>\
<br/><div class="lblPicked" style="font-size:10px; font-weight:300; position:relative; background-color:lightgreen;width:50px;">Picked</div>');
$(this).html(input);
});
$('.lblPicked').hide();
ScrollTo('.txt_Picking_Vals:first-child');
$('.txt_Picking_Vals').first().after('<button id="next">next</button>');
$('.txt_Picking_Vals').first().focus();
});
//End picking code
//next button code start
var obj = {
index: 0
};
$(document).on('click', '#next', function() {
$(this).remove();
obj.index = $(".txt_Picking_Vals:focus").index();
obj.index++;
console.log(obj.index);
$('.txt_Picking_Vals').eq(obj.index + 1).after('<button id="next">next</button>')
$('.txt_Picking_Vals').eq(obj.index + 1).focus();
obj.index = $(".txt_Picking_Vals:focus").index();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card-body">
<table id="RMSI_Item_Table" class="table table-striped table-hover tablesaw tablesaw-stack" data-tablesaw-mode="stack" style="text-align:center;">
<thead>
<tr>
<th>Part Number</th>
<th>Part Description</th>
<th>QTY</th>
<th>Picked</th>
<th>Section</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr id="96">
<td>1-4251</td>
<td>RMSI 8ft Clik Clik 1 Button (Blue) Pole</td>
<td>34</td>
<td class="Picking_TD" data-id="96">0</td>
<td></td>
<td style="width:40px;">
<button id="singlebutton" type="button" class="btn btn-primary btn_Row_Edit" data-id="96"> <i class="zmdi zmdi-edit m-r-5"></i>
Edit
</button>
</td>
<td style="width:40px;">
<button id="singlebutton" type="button" class="btn btn-danger btn_Row_Delete" data-id="96"> <i class="zmdi zmdi-delete m-r-5"></i>
Delete
</button>
</td>
</tr>
<tr id="97">
<td>1-4253</td>
<td>RMSI Aluminum Pole Extension</td>
<td>22</td>
<td class="Picking_TD" data-id="97">0</td>
<td></td>
<td style="width:40px;">
<button id="singlebutton" type="button" class="btn btn-primary btn_Row_Edit" data-id="97"> <i class="zmdi zmdi-edit m-r-5"></i>
Edit
</button>
</td>
<td style="width:40px;">
<button id="singlebutton" type="button" class="btn btn-danger btn_Row_Delete" data-id="97"> <i class="zmdi zmdi-delete m-r-5"></i>
Delete
</button>
</td>
</tr>
<tr id="98">
<td>1-4251</td>
<td>RMSI 8ft Clik Clik 1 Button (Blue) Pole</td>
<td>455</td>
<td class="Picking_TD" data-id="98">0</td>
<td></td>
<td style="width:40px;">
<button id="singlebutton" type="button" class="btn btn-primary btn_Row_Edit" data-id="98"> <i class="zmdi zmdi-edit m-r-5"></i>
Edit
</button>
</td>
<td style="width:40px;">
<button id="singlebutton" type="button" class="btn btn-danger btn_Row_Delete" data-id="98"> <i class="zmdi zmdi-delete m-r-5"></i>
Delete
</button>
</td>
</tr>
<tr id="99">
<td>17-3823</td>
<td>Header Brackets - Universal Orientation (Starbucks)</td>
<td>24</td>
<td class="Picking_TD" data-id="99">0</td>
<td></td>
<td style="width:40px;">
<button id="singlebutton" type="button" class="btn btn-primary btn_Row_Edit" data-id="99"> <i class="zmdi zmdi-edit m-r-5"></i>
Edit
</button>
</td>
<td style="width:40px;">
<button id="singlebutton" type="button" class="btn btn-danger btn_Row_Delete" data-id="99"> <i class="zmdi zmdi-delete m-r-5"></i>
Delete
</button>
</td>
</tr>
<tr id="100">
<td>3237-4222</td>
<td>BLACKHAWK NETWORK Telecom FOS GPR Alaska Kit</td>
<td>4545</td>
<td class="Picking_TD" data-id="100">0</td>
<td></td>
<td style="width:40px;">
<button id="singlebutton" type="button" class="btn btn-primary btn_Row_Edit" data-id="100"> <i class="zmdi zmdi-edit m-r-5"></i>
Edit
</button>
</td>
<td style="width:40px;">
<button id="singlebutton" type="button" class="btn btn-danger btn_Row_Delete" data-id="100"> <i class="zmdi zmdi-delete m-r-5"></i>
Delete
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<button id="pick" class="btn btn-success"> <i class="zmdi zmdi-case-play m-r-5"></i>
Start Picking</button>
<!-- Search panel end-->【问题讨论】：
-
没问题@j08691
标签： javascript jquery html