我已经阅读了所有相关文章,并没有成功使用它们。显然,我不是JavaScript专家。我曾经尝试过使用option和selectedItem,但是不知道如何提取选择对象以使用它。
这是我代码的一小部分,希望您能对我有所帮助。
<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,斯科蒂亚西翁基金会
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);
}
答案 0 :(得分: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>
希望它可以帮助您理解概念。