Как я могу получить значение из ячейки в таблице?

Question

Я прочитал все связанные сообщения и использовал их безуспешно. Очевидно, я не эксперт по javascript. Я пробовал с option и selectedItem, но не знаю, как извлечь объект select, чтобы использовать его.

Это часть моего кода, надеюсь, вы можете мне помочь.

<div class="card-body">
  <table class="table" id="products_table">
    <thead>
    <tr>
      <th>Descripción</th>
      <th>Suaje</th>
      <th>Cantidad/etiq.</th>
      <th>Importe</th>
      <th>Sustrato</th>
      <th>Sustrato $</th>
      <th>Acabado</th>
      <th>Acabado $</th>
      <th>Otros</th>
      <th>Otro $</th>
      <th>Colores</th>

    </tr>
    </thead>
    <tbody>

    <input type="text" id="test" name="test" class="form-control"/>

    <tr id="product0">


      <td>
        <input type="text" name="descripcion" class="form-control" value=""/>
      </td>
      <td>
        <select id="suajes_lista" name="suajes_lista" class="form-control" style="width: 100px;">
          <option value="">-- escoge el suaje --</option>
          @foreach ($suajes as $suaje)
            <option value="{{ $suaje->id }}">
              {{ $suaje->codificacion . ', Corte '. $suaje->corte->nombre. ', Dientes '. $suaje->dientes . ', M. Eje '. $suaje->medida_eje . ', M. Desarrollo '. $suaje->medida_desarrollo . ', C. Eje '. $suaje->no_cavidades_eje . ', C. Desarrollo '. $suaje->no_cavidades_desarrollo . ', Sep. C. Eje '. $suaje->sep_cavidades_eje. ', Sep. C. Desarrollo '. $suaje->sep_cavidedes_desarrollo . ', P. Dist. '. $suaje->porcentaje_dist . ', Ancho mm '. $suaje->ancho_papel_mm . ', Mult. ' . $suaje->mult_venta_millares
              }}
            </option>
          @endforeach
        </select>
      </td>
    </tr>
    </tbody>
  </table>
</div>

Javascript в конце файла

// Agrega o elimina renglones, partidas de la cotización

let row_number = 1;
$("#add_row").click(function(e){
  e.preventDefault();
  let new_row_number = row_number - 1;
  $('#product' + row_number).html($('#product' + new_row_number).html()).find('td:first-child');
  $('#products_table').append('<tr id="product' + (row_number + 1) + '"></tr>');

  document.getElementById("products_table").rows[row_number + 1].cells[1].addEventListener("change", attachOnChangeToCells);
  row_number++;
});

function attachOnChangeToCells()
{
  $('#test').val(row_number);
  var array = @json($suajes);
  alert(document.getElementById("products_table").rows[this.parentNode.rowIndex].cells[1].innerHTML);
  alert($(this).text());
  alert($(this).val());
  alert(document.getElementById("products_table").rows[this.parentNode.rowIndex].cells[1].firstChild.value);
}

Answer 1

Я вижу, что вы уже используете функцию JQuery в коде, и, поскольку Laravel используете ее, вы можете управлять этим с помощью JQuery. Я внес некоторые изменения, так что все должно работать как надо. Вот пример:

$("#add_row").on('click', function(e){
  let row_number = $('#products_table tbody tr').length;
  e.preventDefault();
  $('#products_table').append('<tr id="product' + row_number + '"></tr>');
  $('#product' + row_number).html($('#product' + (row_number - 1)).html());
    
});

$("#products_table").on('change', '#suajes_lista', function(e){
   $("#test").val(this.value); //get current selected option value
   alert('Row where the select was triggered has ID: ' + $(this).parent().parent().attr('id')); //get up on 1 level and get parent ID
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card-body">
  <input type="text" id="test" name="test" value="" class="form-control"/>
  <button type="submit" id="add_row">Add new</button>
  <table class="table" id="products_table">
    <thead>
        <tr>
          <th>Descripción</th>
          <th>Suaje</th>
        </tr>
    </thead>
    <tbody>
      <tr id="product0">
        <td>
          <input type="text" name="descripcion" class="form-control" value=""/>
        </td>
        <td>
          <select id="suajes_lista" name="suajes_lista" class="form-control" style="width: 100px;">
            <option value="">-- Select --</option>
            <option value="1">1</option>
            <option value="2">2</option>
          </select>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Надеюсь, это поможет вам понять концепцию.