Получить значение столбца таблицы, отфильтрованного с помощью jquery

Question

У меня есть jQuery динамический c стол, составленный идеально. Вот таблица ниже:

<table class="table table-hover" id="order_table">
    <thead>
        <tr>
            <th>Item Name</th>
            <th>Quantity</th>                               
            <th>Delete</th>
        </tr>
    </thead>
    <tbody>                                              
        <tr id="row1">
            <input type="hidden" class="pid" name="pid" value="12 "> 
            <td id="ok" class="selected_item_name">Nokia110</td>
            <td id="ok" class="selected_item_quantity">1</td> 
            <td id="ok"><button name="delete" id="1" class="btn_remove"><i class="feather icon-trash-2 f-30 text-c-blue"></i></button></td>
        </tr>
        <tr id="row2">
            <input type="hidden" class="pid" name="pid" value="13 ">
            <td id="ok" class="selected_item_name">Samsung</td>
            <td id="ok" class="selected_item_quantity">1</td>
            <td id="ok"><button name="delete" id="2" class="btn_remove"><i class="feather icon-trash-2 f-30 text-c-blue"></i></button></td>
        </tr>
        <tr id="row3">
            <input type="hidden" class="pid" name="pid" value="11 "> <td id="ok" class="selected_item_name">$name</td>
            <td id="ok" class="selected_item_quantity">1</td>
            <td id="ok"><button name="delete" id="3" class="btn_remove"><i class="feather icon-trash-2 f-30 text-c-blue"></i></button></td>
        </tr>
        <tr id="row4">
            <input type="hidden" class="pid" name="pid" value="12 "> 
            <td id="ok" class="selected_item_name">Nokia110</td>
            <td id="ok" class="selected_item_quantity">2</td>
            <td id="ok"><button name="delete" id="4" class="btn_remove"><i class="feather icon-trash-2 f-30 text-c-blue"></i></button></td>
        </tr>
        <tr id="row5">
            <input type="hidden" class="pid" name="pid" value="12 "> 
            <td id="ok" class="selected_item_name">Nokia110</td>
            <td id="ok" class="selected_item_quantity">3</td>
            <td id="ok"><button name="delete" id="5" class="btn_remove"><i class="feather icon-trash-2 f-30 text-c-blue"></i></button></td>
        </tr>
    </tbody>
</table>

Здесь я использовал <input type="hidden" class="pid" name="pid" value=""> для отправки идентификатора продукта на сервер.

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

Я использовал этот jQuery для поиска в таблице, но не нашел значения на основе pid = 13. Вот код jQuery:

$('#search').keyup(function() {  
    search_table($(this).val());  
});  

function search_table(value) {   
    $('#order_table tr').each(function() {  
        var found = 'false';  
        $(this).each(function() {  
            if($(this).text().toLowerCase().indexOf(value.toLowerCase()) >= 0)  
            {  
                found = 'true';  
            }  
        });  

        if(found == 'true')  
        {  
            $(this).show();  
        }  
        else  
        {  
            $(this).hide();  
        }  
    });  
} 

Извините, если я сделал ошибку, так как я новичок ie в jQuery. Пожалуйста, помогите мне найти общее количество на основе конкретного идентификатора продукта.

Спасибо

Answer 1

Вам просто нужно искать ячейку таблицы td внутри каждого tr, а затем искать значение вместо текста, так как pid=13 сохраняется как:

<input type="hidden" class="pid" name="pid" value="13 ">

Кроме того, обновите свой HTML разметка, так как сейчас вышеприведенный ввод не находится внутри td, что недопустимо. Поместите его внутрь любого td, чтобы это работало.

Код:

function search_table(value) {
  $('#order_table tr').each(function() {
    var found = 'false';
    $('td', this).each(function() {    
      var pid = $('.pid', this).val() || '';
      if (pid.toLowerCase().indexOf(value.toLowerCase()) >= 0) {
        found = 'true';
        return false;
      }
    });
    $(this).toggle(found == 'true');
  });
}

$('#search').keyup(function() {
  search_table($(this).val());
});

function search_table(value) {
  $('#order_table tr').each(function() {
    var found = 'false';
    $('td', this).each(function() {
      var pid = $('.pid', this).val() || '';
      if (pid.toLowerCase().indexOf(value.toLowerCase()) >= 0) {
        found = 'true';
        return false;
      }
    });
    $(this).toggle(found == 'true');
  });

  var quantity = 0;
  $(".selected_item_quantity:visible").each(function() {
    quantity += parseInt($(this).text());
  });
  
  console.log(quantity)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="text" id="search" placeholder="Search..." /><br/>
<br/>
<table class="table table-hover" id="order_table">
  <thead>
    <tr>
      <th>Item Name</th>
      <th>Quantity</th>
      <th>Delete</th>
    </tr>
  </thead>
  <tbody>
    <tr id="row1">
      <td id="ok" class="selected_item_name">
        <input type="hidden" class="pid" name="pid" value="12 "> Nokia110
      </td>
      <td id="ok" class="selected_item_quantity">1</td>
      <td id="ok"><button name="delete" id="1" class="btn_remove"><i class="feather icon-trash-2 f-30 text-c-blue"></i></button></td>
    </tr>
    <tr id="row2">
      <td id="ok" class="selected_item_name">
        <input type="hidden" class="pid" name="pid" value="13 ">Samsung</td>
      <td id="ok" class="selected_item_quantity">1</td>
      <td id="ok"><button name="delete" id="2" class="btn_remove"><i class="feather icon-trash-2 f-30 text-c-blue"></i></button></td>
    </tr>
    <tr id="row3">
      <td id="ok" class="selected_item_name">
        <input type="hidden" class="pid" name="pid" value="11 ">$name</td>
      <td id="ok" class="selected_item_quantity">1</td>
      <td id="ok"><button name="delete" id="3" class="btn_remove"><i class="feather icon-trash-2 f-30 text-c-blue"></i></button></td>
    </tr>
  </tbody>
</table>