Question

我有一个html表，在该表中我有一个包含文本框的列。当我点击开始选择时，它将关注第一个文本框并插入＆＃34;下一个＆＃34;之后的按钮。当用户填写输入然后点击下一步时，我希望它隐藏该按钮并关注下一个输入并插入＆＃34;下一个＆＃34;那之后的按钮。

我还想添加一个Prev按钮来恢复输入，如果用户碰巧专注于其他输入之一，它将从最后一个聚焦输入中删除next / prev按钮并添加下一个/ prev按钮指向新聚焦的输入。

这是我到目前为止所尝试的内容：

Demo

＆＃13;

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();
});

＆＃13;

<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-->

＆＃13;

在表格中为文本输入添加“下一步”按钮

0 个答案: