Получить атрибуты элементов из таблицы через JQuery

280

26 мая 2018, 07:40

Есть таблица, в которой повторяются эти строчки:

<div class="input-group input-number-group"> 
  <div class="input-group-button">
    <span class="input-number-decrement changeQuantity">-</span>
  </div> 
  <input class="input-number" type="number" data-id="49" value="0" min="0" max="1000"> 
  <div class="input-group-button"> 
    <span class="input-number-increment changeQuantity">+</span> 
  </div>
</div>

Нужно получить из таблицы из всех .input-number значения атрибутов data-id и value и записать их в ассоциативный массив по типу arr[id][0]="49", arr[value][0]="0"…

Вот пример таблицы:

<table id="goodsBasket" class="table-responsive w-100 d-block d-md-table">
   <tbody>
      <tr>
         <th>Изображение</th>
         <th>Название</th>
         <th>Описание</th>
         <th>Производитель</th>
         <th>Магазин</th>
         <th>Количество</th>
         <th>Действие</th>
      </tr>
      <tr>
         <td><img src="images/goodsImages/05-16-18-10-12-59.jpg"></td>
         <td>dfd</td>
         <td>dfd</td>
         <td>dfd</td>
         <td>rtytry</td>
         <td>
            <div class="input-group input-number-group">
               <div class="input-group-button"> <span class="input-number-decrement changeQuantity">-</span> </div>
               <input class="input-number" type="number" data-id="49" value="0" min="0" max="1000"> 
               <div class="input-group-button"> <span class="input-number-increment changeQuantity">+</span> </div>
            </div>
         </td>
         <td><button data-id="49" type="button" class="btn btn-danger deleteFromSession">Удалить из корзины</button></td>
      </tr>
      <tr>
         <td><img src="images/goodsImages/05-16-18-10-02-30.jpg"></td>
         <td>sgfdgf</td>
         <td>sgfdgf</td>
         <td>sgfdgf</td>
         <td>rtytry</td>
         <td>
            <div class="input-group input-number-group">
               <div class="input-group-button"> <span class="input-number-decrement changeQuantity">-</span> </div>
               <input class="input-number" type="number" data-id="48" value="0" min="0" max="1000"> 
               <div class="input-group-button"> <span class="input-number-increment changeQuantity">+</span> </div>
            </div>
         </td>
         <td><button data-id="48" type="button" class="btn btn-danger deleteFromSession">Удалить из корзины</button></td>
      </tr>
      <tr>
         <td><img src="PATH"></td>
         <td>test</td>
         <td>test</td>
         <td>test</td>
         <td>rtytry</td>
         <td>
            <div class="input-group input-number-group">
               <div class="input-group-button"> <span class="input-number-decrement changeQuantity">-</span> </div>
               <input class="input-number" type="number" data-id="53" value="0" min="0" max="1000"> 
               <div class="input-group-button"> <span class="input-number-increment changeQuantity">+</span> </div>
            </div>
         </td>
         <td><button data-id="53" type="button" class="btn btn-danger deleteFromSession">Удалить из корзины</button></td>
      </tr>
   </tbody>
</table>

Answer 1

Используйте $.map() для обхода всех инпутов и .get() для получения результирующего массива.

var result = $(".input-number").map(function(idx,v){  
                     return {  
                          id: $(v).data('id'),  
                          value: $(v).val()  
                        } ; 
                  }).get(); 
                   
console.log(result);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<table id="goodsBasket" class="table-responsive w-100 d-block d-md-table"> 
   <tbody> 
      <tr> 
         <th>Магазин</th> 
         <th>Количество</th> 
      </tr> 
      <tr> 
         <td>rtytry</td> 
         <td><input class="input-number" type="number" data-id="49" value="0" min="0" max="1000"></td>          
      </tr> 
      <tr>          
         <td>rtytry</td> 
         <td><input class="input-number" type="number" data-id="48" value="2" min="0" max="1000"></td>          
      </tr> 
      <tr> 
         <td>rtytry</td> 
         <td><input class="input-number" type="number" data-id="53" value="3" min="0" max="1000"></td> 
      </tr> 
   </tbody> 
</table>

Answer 2

если я правильно понял вопрос, то небольшая корректировка к предыдущему ответу.

var result = $(".input-number").map(function(idx,v){  
                     return {  
                          [$(v).data('id')]: $(v).val()  
                        } ; 
                  }).get(); 
                   
console.log(result);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<table id="goodsBasket" class="table-responsive w-100 d-block d-md-table"> 
   <tbody> 
      <tr> 
         <th>Изображение</th> 
         <th>Название</th> 
         <th>Описание</th> 
         <th>Производитель</th> 
         <th>Магазин</th> 
         <th>Количество</th> 
         <th>Действие</th> 
      </tr> 
      <tr> 
         <td><img src="images/goodsImages/05-16-18-10-12-59.jpg"></td> 
         <td>dfd</td> 
         <td>dfd</td> 
         <td>dfd</td> 
         <td>rtytry</td> 
         <td> 
            <div class="input-group input-number-group"> 
               <div class="input-group-button"> <span class="input-number-decrement changeQuantity">-</span> </div> 
               <input class="input-number" type="number" data-id="49" value="0" min="0" max="1000"> 
               <div class="input-group-button"> <span class="input-number-increment changeQuantity">+</span> </div> 
            </div> 
         </td> 
         <td><button data-id="49" type="button" class="btn btn-danger deleteFromSession">Удалить из корзины</button></td> 
      </tr> 
      <tr> 
         <td><img src="images/goodsImages/05-16-18-10-02-30.jpg"></td> 
         <td>sgfdgf</td> 
         <td>sgfdgf</td> 
         <td>sgfdgf</td> 
         <td>rtytry</td> 
         <td> 
            <div class="input-group input-number-group"> 
               <div class="input-group-button"> <span class="input-number-decrement changeQuantity">-</span> </div> 
               <input class="input-number" type="number" data-id="48" value="0" min="0" max="1000"> 
               <div class="input-group-button"> <span class="input-number-increment changeQuantity">+</span> </div> 
            </div> 
         </td> 
         <td><button data-id="48" type="button" class="btn btn-danger deleteFromSession">Удалить из корзины</button></td> 
      </tr> 
      <tr> 
         <td><img src="PATH"></td> 
         <td>test</td> 
         <td>test</td> 
         <td>test</td> 
         <td>rtytry</td> 
         <td> 
            <div class="input-group input-number-group"> 
               <div class="input-group-button"> <span class="input-number-decrement changeQuantity">-</span> </div> 
               <input class="input-number" type="number" data-id="53" value="0" min="0" max="1000"> 
               <div class="input-group-button"> <span class="input-number-increment changeQuantity">+</span> </div> 
            </div> 
         </td> 
         <td><button data-id="53" type="button" class="btn btn-danger deleteFromSession">Удалить из корзины</button></td> 
      </tr> 
   </tbody> 
</table>