Получение значения из данных таблицы в отключенный тип ввода

Question

добрый день, мне как бы трудно понять, как получить значение определенных данных в таблице в теге отключенного типа ввода, используя jquery, учитывая, что jquery - одна из моих слабостей, извините заранее, можете ли вы помочь мне с этим, моя цель заключалась в том, что всякий раз, когда пользователь выбирает определенную кнопку, часть которой не будет напрямую go, или изменить значение типа ввода с левой стороны, вот мой код и снимок экрана для получения дополнительной информации подробнее спасибо ...

   Режим по умолчанию  ×    Деталь №   Дата         Номер детали  Действие    stmt_init (); если ($ stmt-> подготовить ($ query)) {$ stmt-> execute (); $ результат = $ stmt-> get_result (); } пока ($ myrow = $ result-> fetch_asso c ()) {$ ctr ++; ?>   Выберите  '; ?>         Закрыть  Сохранить изменения     

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

Вы можете создавать классы для тегов, которые вы sh сохраняете при выборе. Затем при циклическом обходе тегов данных таблицы элементов используйте ключевое слово this, чтобы получить выбранные значения, когда пользователь запускает событие щелчка.

Я использовал информацию stati c, так как у меня нет возможности показывая это с использованием значений Dynami c из базы данных. Просто имейте в виду, когда вы создаете l oop тегов тела таблицы, которые будут содержать информацию о ваших базах данных, чтобы добавить соответствующие классы к этим тегам.

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

Answer 3

Добавьте в свой шаблон класс с именем "setText" <button class="setText">Select</button> и свяжите событие, чтобы получить его первое значение td в строке-паренте, и установите его в поле ввода, как показано ниже.

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