take subtable item

silens

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

colin

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

silens

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

colin

Hi @silens,

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

Cheers,

Colin

silens

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.

allan

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

colin

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

silens

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