Выбор строки из таблицы с последующим выводом значений в переменную

171

22 февраля 2018, 12:46

На странице есть некоторая таблица(рис1) в которую выводится таблица из базы данных. Необходимо нажатием на строку сохранить значения со всех колонок и/или передать их в форму для последующего апдейта всей записи. Собственно как реализовать выбор и передачу переменных из таблички на странице?

<table class="table table-hover">
        <thead>
        <tr>
          <th>id</th>
          <th>Орг структура</th>
          <th>Удален?</th>
          <th>Корпус</th>
          <th>Служба</th>
          <th>Подразделение</th>
          <th>Городской</th>
          <th>Новый городской</th>
          <th>Локальный</th>
          <th>Этаж</th>
          <th>Примечание</th>
        </tr>
        </thead>
        <tbody>
              <tr>
                <td><%= row['id'] %></td>
                <td><%= row['OrgStrukture'] %></td>
                <td><%= row['deleted'] %></td>
                <td><%= row['housing'] %></td>
                <td><%= row['service'] %></td>
                <td><%= row['units'] %></td>
                <td><%= row['ph_city'] %></td>
                <td><%= row['ph_cityNew'] %></td>
                <td><%= row['ph_local'] %></td>
                <td><%= row['floor'] %></td>
                <td><%= row['note'] %></td>
                <!-- Тут надо добавить еще колонки -->
              </tr>
    </tbody>
</table>

Cтили взяты из бутстрапа. <%= .. %> -руби инъекции

Код всей страницы:https://paste2.org/hmbnmOeX

Answer 1

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

Так что либо некоторый объект конфигурации, связывающий номера ячеек и что и как они должны делать. Либо атрибуты к ячейкам.

$("#data").on('click', "tr", function(){ 
    
   $(this).find("td") 
          .each(function(){ 
               var f = $(this).data('field'); 
               var v = $(this).data('value'); 
                
               $("#" + f).val( v == undefined ? $(this).text() : v); 
                
            }); 
           
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<table class="table table-hover"> 
  <thead> 
    <tr><th>id</th> 
        <th>имя</th> 
        <th>возарст</th> 
        <th>отдел</td> 
    </tr> 
  </thead> 
  <tbody id="data"> 
      <tr> 
         <td data-field="id">1</td> 
         <td data-field="name">василий</td> 
         <td data-field="age">20</td> 
         <td data-field="dep" data-value="1">ИТ</td> 
      </tr> 
       
<tr> 
         <td data-field="id">2</td> 
         <td data-field="name">константин</td> 
         <td data-field="age">30</td> 
         <td data-field="dep" data-value="2">бухгалтерия</td> 
      </tr>       
  </tbody> 
</table> 
 
<div class="row"> 
  <form class="form-horizontal"> 
    <input id="id"   type="hidden" value=""> 
    <div class="col-xs-3"> 
       <label>Имя</label> 
       <input id="name" type="text" class="form-control"> 
    </div> 
    <div class="col-xs-3"> 
       <label>Возраст </label> 
       <input id="age"  type="number" class="form-control"> 
     </div> 
    <div class="col-xs-3"> 
       <label>Отдел</label> 
       <select id="dep" class="form-control"> 
          <option value="1">ИТ</option> 
          <option value="2">бухгалтерия</option> 
       </select>  
    </div> 
  </form> 
</div>