将值从表数据获取到禁用的输入类型

Question

美好的一天，我有点难以弄清楚如何使用 jquery 将表上某个数据的值获取到禁用的输入类型标记，考虑到 jquery 是我的弱点之一，提前抱歉，可以你帮我解决这个问题，我的目标是每当用户选择某个按钮时，该部分将直接转到或更改左侧输入类型的值这是我的代码和屏幕截图以获取更多详细信息谢谢...

  <div class="modal fade" id="modal-default">
<div class="modal-dialog modal-lg">
  <div class="modal-content">
    <div class="modal-header">
      <h4 class="modal-title">Default Modal</h4>
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      <div class="col-lg-12">
        <div class="row">
          <div class="col-5">
            <form role="form">
              <div class="form-group">
                <label for="exampleInputEmail1">Part No.</label>
                <input type="email" class="form-control" id="inputPartNo" placeholder="Select Part No." disabled>
              </div>
              <div class="form-group">
                <label>Date</label>
                 <div class="input-group">                      
                    <div class="input-group-prepend">                      
                      <span class="input-group-text"><i class="far fa-calendar-alt"></i></span>
                    </div>
                    <input type="text" class="form-control" data-inputmask-alias="datetime" data-inputmask-inputformat="dd/mm/yyyy" data-mask>
                  </div>
                  <!-- /.input group -->
              </div>               
            </form>
          </div>
          <div class="col-7">
                    <table id="modal" class="table table-bordered table-hover">
                      <thead> 
                          <tr>
                            <th>Part No.</th>
                            <th style="width:10%">Action</th>
                          </tr>
                      </thead>
                      <tbody>
                          <?php
                              $query = "SELECT * FROM `tbl_stocks`";

                              $stmt = $connect->stmt_init();
                              if ($stmt->prepare($query)) {
                                  $stmt->execute();
                                  $result = $stmt->get_result();
                              }   

                              while ($myrow = $result->fetch_assoc()) {
                                  $ctr++;
                              ?>
                              <!-- ITEM --> 
                              <tr>                       
                              <td><?php echo $myrow["Part_no"];?></td>
                              <?php echo '<td><button id="setText'.$ctr.'">Select </button></td>'; ?>
                            </tr>                                 

                              <?php 
                                 $sr='<script> 
                                  $("#setText'.$ctr.'").click(function(event) { 
                                      $("#inputPartNo").val("'.$myrow["Part_no"].'"); 
                                  }); 
                                 </script>';
                                echo $sr;
                              }//end of loop
                          ?>
                      </tbody>
                      <tfoot>                            
                      </tfoot>
                    </table>                 
          </div>
        </div>              
      </div>
    </div>
    <div class="modal-footer justify-content-between">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      <button type="button" class="btn btn-primary">Save changes</button>
    </div>
  </div>
  <!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->

Answer 1

您可以通过向每个按钮添加数据属性来做到这一点。这可能是最简单的方法。

<button data-part="650-0017A">Select</button>

如果 jQuery 是您的弱点，只需使用标准 javascript - 为每个按钮添加事件侦听器并使用其数据属性更新输入值。

文档：https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

var input   = document.getElementById('input'),
    buttons = document.querySelectorAll('.btn-action');
    
buttons.forEach(function(e){
    e.addEventListener('click',function(){
        input.value = e.dataset.test;
    });
});

<button class="btn-action" data-test="Lorem Ipsum 1">Action 1</button>
<button class="btn-action" data-test="Lorem Ipsum 2">Action 2</button>
<button class="btn-action" data-test="Lorem Ipsum 3">Action 3</button>
<button class="btn-action" data-test="Lorem Ipsum 4">Action 4</button>

<input id="input" disabled>

Answer 2

在您的模板中添加一个名为 "setText" <button class="setText">Select</button> 的类并绑定一个事件以获取它的 parenr row first td 值并将其设置为输入框，如下所示。

$(".setText").click(function(event) { 
    $("#inputPartNo").val($(this).closest('tr').find("td:first").text());
}); 

Answer 3

您可以为您希望在选择时存储的标签创建类。然后当循环遍历元素表数据标签时，当用户触发点击事件时，使用this 关键字来获取选定的值。

我使用静态信息，因为我无法使用数据库中的动态值来显示这一点。请记住，当您创建将保存数据库信息的表体标签循环时，将相关类添加到这些标签中。

let $part_number = $('.part_number');
let $part_name = $('.part_name');
let $select_btn = $('.select_btn');
// here we get the values using a loop .each() 
// because the 'part number', 'part name' and 'select button' share indexing conventions
// the index can be used to find the content within the td node list that
// is not being looped. This method would not work if you did not have 
// grouped pairs of selectors that shared an index. 

// loop through the select buttons elements using it class selector and get the index
$select_btn.each(function(index){
  //use the key word this to to create a n event listener for click
  $(this).click(function(){
    // define the groups other elements values or 'textContent' for storinging the selected values
    let target_number = $part_number[index].textContent;
    let target_name = $part_name[index].textContent;
    
    // logging the values for display in the console to show it works
    console.log(target_number + ' - ' + target_name + ' has been selected')
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal fade" id="modal-default">
<div class="modal-dialog modal-lg">
  <div class="modal-content">
    <div class="modal-header">
      <h4 class="modal-title">Default Modal</h4>
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      <div class="col-lg-12">
        <div class="row">
          <div class="col-5">
            <form role="form">
              <div class="form-group">
                <label for="exampleInputEmail1">Part No.</label>
                <input type="email" class="form-control" id="inputPartNo" placeholder="Select Part No." disabled>
              </div>
              <div class="form-group">
                <label>Date</label>
                 <div class="input-group">                      
                    <div class="input-group-prepend">                      
                      <span class="input-group-text"><i class="far fa-calendar-alt"></i></span>
                    </div>
                    <input type="text" class="form-control" data-inputmask-alias="datetime" data-inputmask-inputformat="dd/mm/yyyy" data-mask>
                  </div>
                  <!-- /.input group -->
              </div>               
            </form>
          </div>
          <div class="col-7">
                    <table id="modal" class="table table-bordered table-hover">
                      <thead> 
                          <tr>
                            <th>Part No.</th>
                            <th style="width:10%">Action</th>
                          </tr>
                      </thead>
                      <tbody id="tableBody">
                          <tr>
                            <!-- Use a selector in each of your tables data tags that will 
                                 allow you to select that data using jquery or javascript-->
                            <td class='part_number'>1234</td>
                            <td class='part_name'>widget 1</td>
                            <td>
                              <button class='select_btn'>Select</button>
                            </td>
                          </tr>>
                          <tr>
                            <td class='part_number'>2345</td>
                            <td class='part_name'>widget 2</td>
                            <td>
                              <button class='select_btn'>Select</button>
                            </td>
                          </tr>>
                          <tr>
                            <td class='part_number'>3456</td>
                            <td class='part_name'>widget 3</td>
                            <td>
                              <button class='select_btn'>Select</button>
                            </td>
                          </tr>>
                          <tr>
                            <td class='part_number'>4567</td>
                            <td class='part_name'>widget 4</td>
                            <td>
                              <button class='select_btn'>Select</button>
                            </td>
                          </tr>
                      </tbody>
                      <tfoot>                            
                      </tfoot>
                    </table>                 
          </div>
        </div>              
      </div>
    </div>
    <div class="modal-footer justify-content-between">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      <button type="button" class="btn btn-primary">Save changes</button>
    </div>
  </div>
  <!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->