单击表格行上的按钮,并在模态窗口中显示值

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.

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?

Code:

      <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>

Thanks in advance!

1个回答



click事件应该与按钮而不是表格相关联:</ p>

  $(  '.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')
});

</ code> </ pre>

您的编辑按钮会触发引导模式:您可以从编辑按钮中删除 data-toggle ='modal'</ code>并触发 单击事件 $('#edit')。modal('show')</ code>的编程模式。 或者使用模态事件 show.bs.modal </ code>,如下所示</ p>

  $('#edit')。on('show.bs.modal'  ,function(event){
var $ button = $(event.relatedTarget)//触发模态的按钮
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());
} );
});
</ code> </ pre>
</ div>

展开原文

原文

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')
        }); 

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());
        });
 });

dsifjgogw48491752
dsifjgogw48491752 好的,谢谢@Yacine,我在<td data-field ='page'>之后使用了js:var field = $(this).data(“field”);
大约 4 年之前 回复
douxu5845
douxu5845 如果你有义务在td标签中使用name属性,你总是可以使用attr方法获取它的值:$(this).attr('name')
大约 4 年之前 回复
dsf6778
dsf6778 嗨,我检查你的HTML,我建议不要在td中使用name属性,它不是td标签的有效属性,而是使用data-name并获取它的值,如下所示:$(this).data('name “)
大约 4 年之前 回复
dsfsdfsdfsdf6455
dsfsdfsdfsdf6455 你好再次:)我试图在模态窗口中显示图像,但它不起作用。 我认为问题是我无法恢复td标签的attrib'名称'链接到窗口模式的输入形式。 你可以帮帮我吗?
大约 4 年之前 回复
dousi1906
dousi1906 祝你好运:),如果你需要帮助,请告诉我!
大约 4 年之前 回复
dtiopy6088
dtiopy6088 现在它正在运作! 我将发现在模态窗口的字段中显示此信息:)
大约 4 年之前 回复
duanbarong4617
duanbarong4617 我更新了我的答案,使用模态事件show.bs.modal检查第二个选项
大约 4 年之前 回复
drt12345678
drt12345678 这个版本不起作用$('#tableprod .btn-edit')。click(function(){也是。
大约 4 年之前 回复
dongsisui7562
dongsisui7562 它不起作用点击事件不为此启动我使用其他版本$('#tableprod')。click(function(){
大约 4 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐