take subtable item

take subtable item

silenssilens Posts: 101Questions: 40Answers: 0

I have a subtable in which I can take the value of id in this way, but if I hide the value of id, it does not work anymore

how can I access a value of a row in a subtable or daughter table

$('table').off('click', 'button.TareaH');
    $('table').on('click', 'button.TareaH', function () {
        idT = $(this).parent().siblings('td:first').text();
        
    });

Gracias

This question has an accepted answers - jump to answer

Answers

  • colincolin Posts: 14,700Questions: 1Answers: 2,510

    Hi @silens ,

    We're happy to take a look, but it would help, as per the forum rules, if you could link to a running test case showing the issue so we can offer some help. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

    Cheers,

    Colin

  • silenssilens Posts: 101Questions: 40Answers: 0

    I need to get a value from the subtable column by clicking on a row.

    Es un ejemplo como este.

    https://datatables.net/examples/api/row_details.html

  • colincolin Posts: 14,700Questions: 1Answers: 2,510

    Hi @silens,

    Something like this will get the middle row (item 1) of the children.

    Cheers,

    Colin

  • silenssilens Posts: 101Questions: 40Answers: 0

    Muchas gracias por ayudarme, no he podido hacer uso de su código.

    Mi problema es que al hacer click sobre un tr de historia, tambien hace click sobre el tr de la tabla hija tarea de historia. Como podría diferenciarlos?

    Tabla principal Historias

    function historias() {
        var parametros = {
            "interruptor": interruptor,
            "prsp":prsp
        };
        tableHistorias = $('#tbl_Historias').DataTable({
                "ajax": {
                    "data": parametros,
                    "url": "php/PlnDir/his_n_colab.php",
                    "type": "POST",
                    "dataSrc": "",
                },
    
                "columns": [{
                        "defaultContent": "<button type='button' id=\"idTareaH\" title=\"Tareas de historia\" class='tareas  btn btn-primary btn-xs '><span class='glyphicon glyphicon-pencil'></span></button>  <button type='button' id=\"idTareaH\" title=\"Añadir tarea a historia\" class='tarToHis  btn btn-primary btn-xs '><span class='glyphicon glyphicon-plus'></span></button>",
                        "width": "6%"
                    }, {
                        "data": "id"
                    }, {
                        "data": "name"
                    }]
            });
    
        //Despliega las tareas de la historia
        $('#tbl_Historias tbody').off('click', 'button.tareas');
        $('#tbl_Historias tbody').on('click', 'button.tareas', function () {
    
            var tr = $(this).closest('tr');
            var row = tableHistorias.row( tr );
            var open = row.child.isShown();
            var data_formHisId = tableHistorias.row($(this).parents("tr")).data();
            tableHistorias.rows().every( function ( rowIdx, tableLoop, rowLoop ) {
                if (this.child.isShown()) {
                    this.child.hide();
                    $(this.node()).removeClass('shown');
                }
            });
    
            if(!open){
                    tareaDhistoria(data_formHisId['id'], function (tablaTarea) {
                    row.child(tablaTarea).show(); //Esta escondido, llamo a la función
                    tr.addClass('shown');   
                });
            }
        });
    
    
        //Al hacer doble click, entro la historia
        $('#tbl_Historias tbody').off('dblclick', 'tr'); 
        $('#tbl_Historias tbody').on('dblclick', 'tr', function () {
            var idH = tableHistorias.row( this ).data();
            origen = "html/PlnDir/historias.html";
            PlnDir('php/PlnDir/formHistoria.php?idHis=' + idH['id'] + '&origen=' + origen, "PlnDir", "historia");
        });
    
    }
    
    

    Tabla hija


    function tareaDhistoria(id,callbackFunction) { var parametros = { "idHis": id, }; $.ajax({ data: parametros, "url": "php/PlnDir/his_tarea.php", type: "POST", success: function (data) { objJson = JSON.parse(data); var tablaTarea = '<div class="table-responsive">' + '<table id="tblTareaH" cellspacing="0" width="100%">' + '<thead>' + '<tr HEIGHT="3">' + '<td BGCOLOR="#D0D3D4">' + '<p>Tareas</p>' + '</td>' + '<td BGCOLOR="#D0D3D4">Id:</td>' + '<td BGCOLOR="#D0D3D4">Tarea</td>' + '<td BGCOLOR="#D0D3D4">Descripción</td>' + '<td BGCOLOR="#D0D3D4">Colaborador</td>' + '</tr>' + '</thead>' + '<tbody>'; $.each(objJson, function (i, item) { tablaTarea += '<tr style="cursor: pointer;">' + '<td>' + '<button type=\"button\" title=\"Ir a tarea\" class=\"TareaH btn btn-primary btn-xs \"><span class=\"glyphicon glyphicon-pencil\"></span></button>' + '<td>' + objJson[i].id + '</td>' + '<td>' + objJson[i].name + '</td>'+'</th>' + '<td>' + objJson[i].dsc + '</td>' + '<td>' + objJson[i].colab_name + '</td>' + '</tr>'; }); tablaTarea += '</tbody>' + '</table>' + '</div>'; callbackFunction(tablaTarea); tblT = $('#tblTareaH').DataTable({ "responsive": true, "destroy": true, "paging": true, }); } });

    Me es imposible representar en consola este código.

  • allanallan Posts: 58,237Questions: 1Answers: 9,318 Site admin
    Answer ✓

    I'm not sure I fully understand (a test case as Colin asked for would be useful), but it sounds like event bubbling is the issue here. Using event.stopPropagation() would help resolve that.

    Allan

  • colincolin Posts: 14,700Questions: 1Answers: 2,510
    edited August 2018

    Hi @silens ,

    You would differentiate between them by the class name - in your example you're adding class 'shown', so as in my example, you can use that as part of the jQuery selector to tell if it's a child or the parent. Likewise, there are other classes that only belong to the parent if you want an event listener only for those rows,

    Cheers,

    Colin

  • silenssilens Posts: 101Questions: 40Answers: 0

    Muchisimas gracias, lo he solucionado con la función event.stopPropagation()

This discussion has been closed.