Как поместить значения из таблицы в массив?

299

29 марта 2018, 10:28

Есть таблица, которая формируется php, но в каждой строке есть две ячейки с селектом, которые пользователь "заполняет" самостоятельно. Нужно средствами Jquery || Js собрать все значения селектов в массив. КАК?

Это код на ПХП. тут формируется таблица.

  echo '<table class="table text-center mb-5">
        <thead>
        <tr>
            <th scope="col">Ссылка на сайт, которые встречается в ТОП-10</th>
            <th scope="col">ЧастотностьСколько раз сайт был найден</th>
            <th scope="col">Сколько это в % от всех ТОПов</th>
            <th scope="col">Тональность сайта </th>
            <th scope="col">Тип сайта</th>
        </tr>
        </thead>
        <tbody>';
foreach ($yagoo_res2 as $url => $num) {
    $percent = round(100/count($yagoo_res2) * $num,1);
    echo '<tr>';
    echo "<td><a href=$url class='my_link'> $url </a></td>";
    echo '<td>' . $num . '</td>';
    echo '<td>' . $percent . '</td>';
    echo '<td><select class="custom-select" id="inputGroupSelect01">
    <option selected>Не определена</option>
    <option value="положительная">положительная</option>
    <option value="2">отрицательная</option>
    <option value="3">нейтральная</option>
  </select></td>';
    echo '<td><select class="custom-select" id="inputGroupSelect02">
    <option selected>Не определен</option>
    <option value="1">отзовик</option>
    <option value="2">блог</option>
    <option value="3">соцсеть</option>
    <option value="4">СМИ</option>
    <option value="5">свой сайт (подконтрольный)</option>
  </select></td>';
    echo '</tr>';
}
echo '</tbody></table>';

ПРобовал вот это

var table = $('.table');
        var trs = $('tr', table);
        var option = [];
        trs.each(function () {
            option.push($('td', this));
        });

но значения селектов не собирает.

Answer 1

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

В данном случае в массивы попадает текст (метки), если нужны значения, то используйте $(this).val();

var result = $("table select > option").map(function(){ return $(this).text(); }).get(); 
console.log(result); 
 
var result = $("table select > option:selected").map(function(){ return $(this).text(); }).get(); 
console.log(result);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<table> 
  <tr><td> 
    <select> 
       <option>1</option> 
       <option selected>2</option> 
       <option>3</option> 
    </select> 
  </td></tr>   
  <tr><td> 
    <select> 
       <option>4</option> 
       <option>5</option> 
       <option selected>6</option> 
    </select> 
  </td></tr> 
</table>

Answer 2

Вы зачем-то проходите по таблице. Когда можно брать сразу значения из select

Но для начала вам стоит сделать для каждого select свой уникальный id - c привязкой к номеру строки. Либо вы можете убрать id и добавить в каждый select аттрибуты "data" - чтобы они служил номером строки.

Т.е. можно заменить

echo '<td><select class="custom-select" id="inputGroupSelect01">

на

echo "<td><select class="custom-select" data-col="1" data-row="$num">

Со вторым селектом аналогично

А дальше уже можно выбирать данные

var result = {}; 
$(".custom-select").each(function(){ 
  var row = $(this).data('row'); 
  if (!(row in result)) { 
    result[row] = {}; 
  } 
  result[row][$(this).data('col')] = $(this).val()  
}); 
console.log(result);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<table> 
  <tr><td> 
    <select data-col="1" data-row="0" class="custom-select"> 
       <option value="1">1</option> 
       <option value="2" selected>2</option> 
       <option value="3">3</option> 
    </select> 
  </td></tr>   
  <tr><td> 
    <select data-col="2" data-row="0" class="custom-select"> 
       <option value="1">1</option> 
       <option value="2">2</option> 
       <option value="3" selected>3</option> 
    </select> 
  </td></tr> 
</table>