单击表格行上的按钮，然后在模态窗口中显示值 [英] Click button on row of the table and show values in modal-window
问题描述
我制作了一个带有引导程序和引导程序表的网站.要将元素添加到boostrap表中，我使用php.问题是，当我单击编辑"按钮时，在模态窗口中没有显示我单击的行的值.
I make a web site with bootstrap and bootstrap table. To add element into boostrap-table I using php. The problem is when I click to the edit button doesn't show on modal-window the values of the row that I clicked.
我认为问题出在jquery代码中.我使用浏览器的Debbug控制台进行了不同的测试，并且我发现单击该按钮不会获得该行的值.我在控制台中尝试了其他信息，并且显示正确，例如:console.log($(this).text());
I think that the problem is in the jquery code. I doing different test with the debbug console of the browser and I have seen that when I clicked it doesn't get the values of the row. I try it another info in the console and I showed correctly, ex: console.log($(this).text());
请您能帮我了解问题出在哪里吗?
Please Could you help me to understand where is the problem?
代码:
<div class="row">
<?php
$conn = Conectarse("localhost", "5432", "addcom", "dbadmin", "Tibidabo");
//query
$query = "SELECT * FROM produccion.ma_producto ORDER BY codigo ASC";
$result = pg_query($conn, $query);
//se despliega el resultado
?><table class='table-bordered' id='tableprod'
data-toggle='table'
data-toolbar='#toolbar'
data-show-refresh='true'
data-show-toggle='true'
data-sort-name='name'
data-sort-order='desc'
data-show-columns='true'
data-pagination='true'
data-search='true'>
<thead class='thead-inverse'>
<tr>
<th data-field='seleccion' data-switchable='false' data-checkbox='true'></th>
<th data-field='estado' data-switchable='false'></th>
<th data-field='edicion' data-sortable='true' data-visible='false'>EDICIÓ</th>
<th data-field='pagina' data-sortable='true'>PÀGINA</th>
<th data-field='codigo' data-sortable='true' data-switchable='false'>CODI</th>
<th data-field='image' data-switchable='false'>IMATGE</th>
<th data-field='descripcion-cat' data-sortable='true'>DESCRIPCIÓ CAT</th>
<th data-field='descripcion-esp' data-sortable='true'>DESCRIPCIÓ ESP</th>
<th data-field='marca' data-sortable='true'>MARCA</th>
<th data-field='gramaje' data-sortable='true'>GRAMATJE</th>
<th data-field='destacado' data-sortable='true' data-visible='false'>DESTACAT</th>
<th data-field='pvp-cat' data-sortable='true'>PVP-CAT</th>
<th data-field='pvp-lev' data-sortable='true'>PVP-LEV</th>
<th data-field='pvp-and' data-sortable='true'>PVP-AND</th>
<th data-field='pvp-cen' data-sortable='true'>PVP-CEN</th>
<th data-field='pvp-nor' data-sortable='true'>PVP-NOR</th>
<th data-field='pvp-vas' data-sortable='true'>PVP-VAS</th>
<th data-field='pvp-spar' data-sortable='true'>PVP-SPAR</th>
<th data-field='user' data-sortable='true' data-visible='false'>USER</th>
<th data-field='fecha-mod' data-sortable='true' data-visible='false'>FECHA-MOD</th>
<th data-field='edit' data-sortable='false' data-switchable='false'>EDIT</th>
</tr>
</thead>
<tbody>
<?php while ($row = pg_fetch_row($result)){ ?>
<tr id='<?php echo $row[0]; ?>'>
<td></td>
<?php echo $estado = EstadoIcon($row[2]); ?>
<td name='edicion'><?php echo $row[1] ?></td>
<td name='pagina'><?php echo $row[3] ?></td>
<td name='codigo'><?php echo $row[0] ?></td>
<?php echo $imatge = AddImage($row[9]); ?>
<td name='descripcion-cat'><?php echo $row[5] ?></td>
<td name='descripcion-esp'><?php echo $row[4] ?></td>
<td name='marca'><?php echo $row[6] ?></td>
<td name='gramaje'><?php echo $row[7] ?></td>
<td name='destacado'><?php echo $row[8] ?></td>
<td name='pvp-cat'><?php echo $row[10] ?></td>
<td name='pvp-lev'><?php echo $row[11] ?></td>
<td name='pvp-and'><?php echo $row[12] ?></td>
<td name='pvp-cen'><?php echo $row[13] ?></td>
<td name='pvp-nor'><?php echo $row[14] ?></td>
<td name='pvp-vas'><?php echo $row[15] ?></td>
<td name='pvp-spar'><?php echo $row[16] ?></td>
<td name='user'><?php echo $row[17] ?></td>
<td name='fecha-mod'><?php echo $row[18] ?></td>
<td><button class='btn btn-xs edit btn-edit' data-toggle='modal' data-target='#edit'><i class="material-icons" style="font-size: 20px">edit</i> </button></td>
</tr>
<?php } ?>
</tbody>
</table>
<script>
var $table = $('#tableprod');
$('#tableprod').click(function() {
var $row = $(this).closest("tr"),
$tdata = $row.find("td");
console.log($(this).text());
$.each($tdata, function(index, value) {
alert ('Entró');
console.log($(this).text());
$( "input:eq(" + index + ")").val($(this).text());
});
});
</script>
提前谢谢！
推荐答案
click事件应与按钮而不是表相关联:
The click event should be associated with button not the table :
$('.btn-edit').click(function() {
var $row = $(this).closest("tr"),
$tdata = $row.find("td");
console.log($(this).text());
$.each($tdata, function(index, value) {
alert ('Entró');
console.log($(this).text());
$( "input:eq(" + index + ")").val($(this).text());
});
$('#edit').modal('show')
});
您的编辑按钮触发引导程序模式:您可以从编辑按钮中删除data-toggle='modal'，并在点击事件$('#edit').modal('show')中以编程方式触发模式.或按照以下方式使用模式事件show.bs.modal
Your edit button trigger the bootstrap modal : you could either remove data-toggle='modal' from your edit button and trigger the modal programatically in the click event $('#edit').modal('show') . Or use the modal events show.bs.modal as follow
$('#edit').on('show.bs.modal', function (event) {
var $button = $(event.relatedTarget) // Button that triggered the modal
var $row = $button.closest("tr"),
$tdata = $row.find("td");
console.log($button.text());
$.each($tdata, function(index, value) {
alert ('Entró');
console.log($(this).text());
$( "input:eq(" + index + ")").val($(this).text());
});
});
这篇关于单击表格行上的按钮，然后在模态窗口中显示值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
